/* ===================================================================
   CRM Venta TPV — tema DARK (stile IDE) su base Synthassi.
   Superfici grigio-scuro fredde, testo chiaro, accento giallo signal
   usato con parsimonia. Override dei token semantici → tutto scuro.
   =================================================================== */

:root {
  color-scheme: dark;

  /* superfici (override dei token chiari di tokens.css) */
  --paper:    #0d0e11;   /* sfondo pagina */
  --paper-2:  #15161b;   /* fasce alternate / header tabella */
  --raised:   #16181d;   /* card / superfici sollevate */
  --ink:      #e7e8ec;   /* testo primario */
  --ink-soft: rgba(231,232,236,0.62);
  --ink-faint:rgba(231,232,236,0.40);
  --ink-hair: rgba(255,255,255,0.08);

  /* estensioni tema dark */
  --line-2:   rgba(255,255,255,0.13);
  --hover:    #1b1d23;
  --input-bg: #1c1e25;
  --focus:    #6ea0ff;
  --on-accent:#111110;          /* testo su giallo/verde */
  --blue-dk:  #9db9ff;          /* blu freddo leggibile su scuro */
  --red-dk:   #ff8e9d;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  font-size: 15px;
}
a { color: var(--blue-dk); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--fw-bold); line-height: 1.12; margin: 0; letter-spacing: -0.01em; color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: rgba(255,255,0,0.22); }

/* ─── Sfondo pagina: griglia tecnica che sfuma verso il basso + alone azzurro ── */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;            /* dietro al contenuto, sopra il colore --paper */
  pointer-events: none;
}
/* griglia azzurra tenue, si dissolve scendendo (mask verticale) */
body::before {
  background-image:
    repeating-linear-gradient(to right,  rgba(157,185,255,0.055) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, rgba(157,185,255,0.055) 0 1px, transparent 1px 64px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 48%, transparent 92%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 48%, transparent 92%);
}
/* alone azzurro freddo che sale dal fondo dello schermo */
body::after {
  background: radial-gradient(140% 72% at 50% 116%,
    rgba(110,160,255,0.18) 0%,
    rgba(110,160,255,0.06) 36%,
    transparent 66%);
}

/* ─── Layout shell ───────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 var(--space-5); }
.page { padding: var(--space-6) 0 var(--space-8); }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head h1 { font-size: 1.6rem; }
.eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-1); }
.eyebrow a { color: var(--ink-faint); }

/* ─── Topbar ─────────────────────────────────────────────────────── */
.topbar { background: #101216; color: var(--ink); border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 100; }
.topbar__in { display: flex; align-items: center; gap: var(--space-6); height: 58px; }
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.topbar__brand:hover { text-decoration: none; }
.topbar__brand img { height: 24px; width: auto; filter: invert(1); opacity: 0.95; }
.topbar__brand b { font-family: var(--font-display); font-size: 0.95rem; color: var(--ink); }
.topbar__brand span { font-family: var(--font-mono); font-size: 0.62rem; color: var(--signal); letter-spacing: 0.12em; text-transform: uppercase; }
.topnav { display: flex; gap: var(--space-2); margin-left: auto; align-items: center; }
.topnav a { color: var(--ink-soft); text-decoration: none; font-size: 0.9rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius); transition: color var(--dur-fast), background var(--dur-fast); }
.topnav a:hover { color: var(--ink); background: var(--hover); text-decoration: none; }
.topnav a.is-active { color: var(--on-accent); background: var(--signal); font-weight: var(--fw-medium); }
.topnav__user { color: var(--ink-faint); font-size: 0.78rem; font-family: var(--font-mono); padding-left: var(--space-3); border-left: 1px solid var(--ink-hair); }

/* ─── Buttons ────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 0.9rem; line-height: 1; padding: 0.6rem 1rem; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: transform var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast); text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--signal); color: var(--on-accent); }
.btn--primary:hover { background: #ffe600; }
.btn--ink { background: var(--input-bg); color: var(--ink); border-color: var(--ink-hair); }
.btn--ink:hover { background: var(--hover); border-color: var(--line-2); }
.btn--accent { background: var(--c-green); color: var(--on-accent); }
.btn--accent:hover { filter: brightness(1.05); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink-hair); }
.btn--ghost:hover { border-color: var(--line-2); background: var(--hover); }
.btn--danger { background: transparent; color: var(--red-dk); border-color: rgba(255,93,115,0.35); }
.btn--danger:hover { background: #ff5d73; color: #fff; border-color: transparent; }
.btn--sm { padding: 0.4rem 0.7rem; font-size: 0.82rem; }
.btn--block { width: 100%; justify-content: center; }

/* ─── Cards / panels ─────────────────────────────────────────────── */
.card { background: var(--raised); border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); }
.card__body { padding: var(--space-5); }
.card__head { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--ink-hair); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__head h2 { font-size: 1.05rem; display: flex; align-items: center; gap: 0.5em; }
.card__head h2 svg { width: 18px; height: 18px; flex: none; color: var(--ink-faint); }
/* Icone card colorate per riquadro (scheda deal) — stesso principio dell'icona
   "Qualifica AI" (.ql-bar__title svg → --signal), una tinta per card. */
.card--quote  .card__head h2 svg { color: #2dd4bf; } /* Preventivo carrello · teal */
.card--glop   .card__head h2 svg { color: #fb923c; } /* Registro Glop · arancio */
.card--request .card__head h2 svg { color: #60a5fa; } /* Richiesta del cliente · azzurro */
.card--docs   .card__head h2 svg { color: #a78bfa; } /* Documenti · viola */

/* Badge stato/pagamento nella pagina /preventivi */
.q-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--ink-hair); color: var(--ink-faint); background: var(--paper-2); white-space: nowrap; }
.q-badge--inviato { color: #60a5fa; border-color: rgba(96, 165, 250, .35); }
.q-badge--aceptado { color: var(--c-green); border-color: rgba(2, 255, 149, .3); }
.q-badge--rechazado { color: var(--c-red); border-color: rgba(255, 45, 85, .35); }
.q-badge--pay-pending { color: var(--signal); border-color: rgba(255, 255, 0, .3); }
.q-badge--pay-paid { color: var(--c-green); border-color: rgba(2, 255, 149, .3); }
.q-badge--expired { color: var(--signal); border-color: rgba(255, 255, 0, .3); }

/* ─── KPI grid ───────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.kpi { background: linear-gradient(180deg, var(--raised), #131419); border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); position: relative; overflow: hidden; }
.kpi__top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.9rem; }
.kpi__idl { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.kpi__ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.kpi__ico svg { width: 16px; height: 16px; }
.kpi__spark { width: 92px; height: 28px; flex: none; }
.kpi__n { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 1.9rem; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.kpi__l { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__delta { font-family: var(--font-mono); font-size: 0.7rem; margin-top: 0.55rem; display: inline-flex; align-items: center; gap: 0.3rem; }
.kpi__delta.up { color: var(--c-green); }
.kpi__delta.dn { color: var(--red-dk); }
.kpi__delta.flat { color: var(--ink-faint); }
/* Selettore periodo sul KPI Ricavi (Totale / Annuale / Mensile) */
.kpi__seg { display: inline-flex; gap: 2px; margin: 0.1rem 0 0.65rem; padding: 2px; background: var(--paper-2); border: 1px solid var(--ink-hair); border-radius: 999px; }
.kpi__seg button { font: inherit; font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); background: transparent; border: 0; padding: 3px 9px; border-radius: 999px; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.kpi__seg button:hover { color: var(--ink-soft); }
.kpi__seg button.is-active { color: #02ff95; background: rgba(2, 255, 149, 0.14); }

/* ─── Header pagina: sottotitolo + data ─────────────────────────────── */
.page-sub { color: var(--ink-faint); font-size: 0.92rem; margin-top: 0.25rem; }
.page-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); letter-spacing: 0.04em; }

/* ─── Griglia dashboard ─────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-4); margin-bottom: var(--space-4); }

/* ─── Grafico "Ricavi per mese" ─────────────────────────────────────── */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 178px; padding-top: 8px; }
.bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.bars__v { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); white-space: nowrap; }
.bars__bar { width: 62%; max-width: 34px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #2c2f39, #23262e); transition: filter .2s var(--ease); }
.bars__bar.is-current { background: linear-gradient(180deg, var(--signal), #caa400); }
.bars__col:hover .bars__bar { filter: brightness(1.25); }
.bars__lab { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); }

/* ─── Barre per stage ───────────────────────────────────────────────── */
.stagebars { display: flex; flex-direction: column; gap: 11px; }
.sb { display: grid; grid-template-columns: 104px 1fr auto auto; align-items: center; gap: 10px; }
.sb__nm { font-size: 0.82rem; color: var(--ink-soft); }
.sb__track { height: 8px; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
.sb__fill { display: block; height: 100%; border-radius: 6px; }
.sb__cnt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink); min-width: 24px; text-align: right; }
.sb__amt { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); min-width: 70px; text-align: right; }

/* ─── Liste compatte (Da fare oggi / Ultimi deal) ───────────────────── */
.todo { display: flex; flex-direction: column; }
.todo__it { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ink-hair); color: inherit; text-decoration: none; }
.todo__it:last-child { border-bottom: 0; }
.todo__it:hover { text-decoration: none; }
.todo__it:hover .todo__t { color: var(--signal); }
.todo__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.todo__av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #0a0b0e; flex: none; }
.todo__t { flex: 1; font-size: 0.88rem; min-width: 0; }
.todo__t small { display: block; color: var(--ink-faint); font-size: 0.74rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo__when { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); white-space: nowrap; }

/* ── Widget "Ultimi deal": deal protagonista, owner discreto a destra ── */
.eyebrow--link { text-decoration: none; transition: color .15s ease; }
.eyebrow--link:hover { color: var(--signal); }
.deal-list { display: flex; flex-direction: column; }
.deal-row { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--ink-hair); color: inherit; text-decoration: none; }
.deal-row:last-child { border-bottom: 0; }
.deal-row__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.deal-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.deal-row__name { display: flex; align-items: center; gap: 7px; font-size: 0.94rem; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-row:hover .deal-row__name { color: var(--signal); }
.deal-row__new { flex: none; font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--on-accent); background: var(--signal); border-radius: 4px; padding: 1px 5px; }
.deal-row__sub { font-size: 0.76rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-row__side { flex: none; max-width: 45%; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.deal-row__val { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 700; color: var(--ink-faint); }
.deal-row__val.is-pos { color: var(--c-green); }
.deal-row__owner { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; font-size: 0.7rem; color: var(--ink-faint); }
.deal-row__oname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-row__av { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 8px; font-weight: 700; }

/* ─── Tables ─────────────────────────────────────────────────────── */
.table-wrap { background: var(--raised); border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); overflow: hidden; }
table.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th { text-align: left; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-hair); background: var(--paper-2); }
.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--ink-hair); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background var(--dur-fast); }
.table tbody tr:hover { background: var(--hover); }
.table .muted { color: var(--ink-faint); }
.table a.row-link { color: var(--ink); font-weight: var(--fw-medium); }
.table a.row-link:hover { color: var(--signal); }

/* ─── Badges (status) ────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25em 0.6em; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--nuovo { background: rgba(255,224,77,0.14); color: #ffe14d; border-color: rgba(255,224,77,0.32); }
.badge--contattato { background: rgba(126,166,255,0.15); color: #9db9ff; border-color: rgba(126,166,255,0.32); }
.badge--preventivo_inviato { background: rgba(2,255,149,0.13); color: #54f0b2; border-color: rgba(2,255,149,0.32); }
.badge--vinto { background: var(--c-green); color: #06231a; border-color: transparent; }
.badge--perso { background: rgba(255,93,115,0.14); color: #ff8e9d; border-color: rgba(255,93,115,0.32); }
.badge--due { background: #ff5d73; color: #1a0a0d; border-color: transparent; }
.badge--review { background: rgba(255,176,32,.14); color: #ffb020; border-color: rgba(255,176,32,.32); font-size: 0.68rem; padding: 2px 6px; margin-left: 5px; vertical-align: middle; }

/* ─── Forms ──────────────────────────────────────────────────────── */
.field { margin-bottom: var(--space-4); }
.field label { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-2); }
.input, .select, .textarea { width: 100%; font-family: var(--font-body); font-size: 0.92rem; color: var(--ink); background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 0.6rem 0.75rem; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px rgba(110,160,255,0.18); }
.textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.inline-form { display: flex; gap: var(--space-2); align-items: flex-end; flex-wrap: wrap; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-3); }

/* ─── Filters bar ────────────────────────────────────────────────── */
.filters { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.filters .input, .filters .select { width: auto; }
.chip { font-family: var(--font-mono); font-size: 0.74rem; padding: 0.35rem 0.7rem; border: 1px solid var(--ink-hair); border-radius: var(--radius-pill); color: var(--ink-soft); text-decoration: none; }
.chip.is-active { background: var(--signal); color: var(--on-accent); border-color: var(--signal); }
.chip:hover { text-decoration: none; border-color: var(--line-2); }
.chip.is-active:hover { border-color: var(--signal); }
.chip--review { border-color: rgba(255,176,32,.4); color: #ffb020; }
.chip--review.is-active { background: rgba(255,176,32,.18); color: #ffb020; border-color: rgba(255,176,32,.6); }
.chip--review:hover { border-color: rgba(255,176,32,.65); color: #ffc84d; }

/* ─── Flash ──────────────────────────────────────────────────────── */
.flash { padding: var(--space-3) var(--space-4); border-radius: var(--radius); margin-bottom: var(--space-4); font-size: 0.9rem; border: 1px solid; }
.flash--ok { background: rgba(2,255,149,0.10); border-color: rgba(2,255,149,0.32); color: #5ef0b5; }
.flash--err { background: rgba(255,93,115,0.10); border-color: rgba(255,93,115,0.32); color: #ff9aa9; }

/* ─── Lead detail ────────────────────────────────────────────────── */
.lead-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); align-items: start; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); font-size: 0.9rem; }
.dl dt { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); align-self: center; }
.dl dd { margin: 0; color: var(--ink); }

/* ─── Timeline ───────────────────────────────────────────────────── */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); border-left: 1px solid var(--ink-hair); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); border: 2px solid var(--raised); }
.timeline .t-meta { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); letter-spacing: 0.04em; }
.timeline .t-type { font-weight: var(--fw-medium); color: var(--ink-soft); }
.timeline .t-body { white-space: pre-wrap; margin-top: var(--space-1); color: var(--ink); }
.draft-box { background: #0a0b0e; color: var(--ink); border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-top: var(--space-2); font-family: var(--font-mono); font-size: 0.82rem; white-space: pre-wrap; }

/* ─── Login ──────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: #08090b; padding: var(--space-5); }
.login-card { width: 100%; max-width: 380px; background: var(--raised); border: 1px solid var(--ink-hair); border-top: 3px solid var(--signal); border-radius: var(--radius-lg); padding: var(--space-7); }
.login-card .brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.login-card .brand img { height: 28px; filter: invert(1); }
.login-card .brand b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.login-card .brand span { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.login-card h1 { font-size: 1.25rem; margin-bottom: var(--space-5); }

/* ─── Utils ──────────────────────────────────────────────────────── */
.stack-6 > * + * { margin-top: var(--space-6); }
.muted { color: var(--ink-faint); }
.mono { font-family: var(--font-mono); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.empty { padding: var(--space-8); text-align: center; color: var(--ink-faint); }

@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .lead-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .topnav { gap: 0; }
  .topnav a { padding: var(--space-2); font-size: 0.82rem; }
  .topbar__brand span { display: none; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ─── Lifecycle badges ───────────────────────────────────────────── */
.badge--lead { background: rgba(255,176,32,.12); color: #ffb020; border-color: rgba(255,176,32,.32); }
.badge--prospect { background: rgba(126,166,255,.14); color: #9db9ff; border-color: rgba(126,166,255,.32); }
.badge--cliente { background: rgba(2,255,149,.12); color: #54f0b2; border-color: rgba(2,255,149,.32); }

/* ─── Pipeline kanban (deals) ────────────────────────────────────── */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kcol { flex: 0 0 272px; background: var(--paper-2); border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.kcol__h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--ink-hair); }
.kcol__h .l { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.kcol__h .pip { width: 8px; height: 8px; border-radius: 50%; }
.kcol__h .meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); text-align: right; line-height: 1.3; }
.kcol__h .meta b { color: var(--ink); display: block; font-size: 11px; }
.klist { padding: 11px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 60px; }
.kcol.drop .klist { outline: 1.5px dashed var(--signal); outline-offset: -6px; border-radius: 8px; background: rgba(255,225,77,.05); }
.kcard { display: block; background: var(--raised); border: 1px solid var(--ink-hair); border-radius: 8px; padding: 12px; cursor: grab; transition: transform .14s var(--ease), border-color .14s; color: inherit; text-decoration: none; }
.kcard:hover { border-color: var(--line-2); transform: translateY(-2px); text-decoration: none; }
.kcard.dragging { opacity: .4; }
.kcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
.kcard .co { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: var(--ink); }
.kcard__sub { font-size: 11px; color: var(--ink-faint); }
.kcard .pr { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); margin-bottom: 10px; }
.kc-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.kc-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--ink-hair); border-radius: 5px; padding: 3px 7px; }
.kc-tag::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--ink-faint); flex: none; }
.kcard .row { display: flex; align-items: center; justify-content: space-between; }
.kcard .val { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--ink); }
.kcard .age { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 5px; }
.kcard .age svg { width: 12px; height: 12px; flex: none; }
.kcard.is-lost { opacity: .72; }
.kc-perso { font-family: var(--font-mono); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; padding: 2px 7px; border-radius: 30px; background: rgba(255,93,115,.14); color: #ff8e9d; border: 1px solid rgba(255,93,115,.32); white-space: nowrap; }
.kc-av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: #0a0b0e; flex: none; }

/* ─── Cella owner in tabella (avatar + nome) ────────────────────────── */
.owner-cell { display: inline-flex; align-items: center; gap: 8px; }
.owner-cell .kc-av { width: 26px; height: 26px; }

/* ─── Owner chip riusabile (avatar 2 iniziali + nome) ───────────────── */
.owner-chip { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
.owner-chip__name { font-size: 0.85rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcard .owner-chip { max-width: 62%; }
.kcard .owner-chip__name { font-size: 0.78rem; color: var(--ink-soft); }
.kcard__life { margin-top: 6px; }
.todo .owner-chip__name { font-size: 0.82rem; }

/* ─── Vista Registro mensile ────────────────────────────────────────── */
.reg-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-bottom: var(--space-5); }
.reg-filters .select { width: auto; flex: 0 0 auto; }
.reg-filters .input { flex: 1 1 200px; min-width: 160px; }

.reg-month { border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); margin-bottom: var(--space-4); overflow: hidden; background: var(--raised); }
.reg-month__head { display: flex; align-items: center; gap: 0.6rem; width: 100%; text-align: left; background: var(--paper-2); border: 0; color: var(--ink); padding: 0.8rem 1rem; cursor: pointer; font-family: var(--font-display); font-weight: 600; }
.reg-month__head:hover { background: var(--hover); }
.reg-chev { display: inline-block; transition: transform .15s var(--ease); color: var(--ink-faint); }
.reg-month.is-open .reg-chev { transform: rotate(90deg); }
.reg-month__name { font-size: 0.98rem; }
.reg-month__name.is-current { color: var(--c-green); }   /* mese corrente in verde Synthassi */
.reg-month__tot { font-size: 0.78rem; color: var(--ink-soft); }
.reg-month__tot b { color: var(--ink); }
.reg-month__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.reg-month.is-open .reg-month__body { grid-template-rows: 1fr; }
.reg-month__inner { min-height: 0; overflow: hidden; }

.reg-cat { border-top: 1px solid var(--ink-hair); }
.reg-cat__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%; padding: 0.5rem 1rem; background: rgba(255,255,255,0.015); border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.reg-cat__head:hover { background: rgba(255,255,255,0.045); }
.reg-cat__l { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 0; }
.reg-cat__chev { display: inline-block; color: var(--ink-faint); transition: transform .15s var(--ease); transform: rotate(90deg); }   /* aperto: punta in giù */
.reg-cat.is-collapsed .reg-cat__chev { transform: none; }                                                                            /* collassato: punta a destra */
.reg-cat__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .24s var(--ease); }
.reg-cat.is-collapsed .reg-cat__body { grid-template-rows: 0fr; }
.reg-cat__body > .table-wrap { min-height: 0; }
@media (prefers-reduced-motion: reduce) { .reg-month__body, .reg-cat__body { transition: none; } }
.reg-cat__badge { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; padding: 2px 9px; border-radius: var(--radius-pill); }
.reg-cat__badge--vinti { background: rgba(2,255,149,.12); color: #54f0b2; border: 1px solid rgba(2,255,149,.3); }
.reg-cat__badge--attivi { background: rgba(126,166,255,.13); color: #9db9ff; border: 1px solid rgba(126,166,255,.3); }
.reg-cat__badge--persi { background: rgba(255,93,115,.12); color: #ff8e9d; border: 1px solid rgba(255,93,115,.3); }
.reg-cat__badge--in_sospeso { background: rgba(255,176,32,.12); color: #ffb020; border: 1px solid rgba(255,176,32,.3); }

.reg-table { font-size: 0.84rem; }
.reg-table th { padding: 0.5rem 0.8rem; }
.reg-table td { padding: 0.4rem 0.8rem; }
.reg-table .c-sub { color: var(--ink-faint); font-size: 0.72rem; }
.reg-sel { background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 0.78rem; padding: 3px 6px; max-width: 130px; }
.reg-sel:focus { outline: none; border-color: var(--focus); }
.reg-st--won { color: #54f0b2; }
.reg-st--lost { color: #ff8e9d; }
.reg-st--open { color: #9db9ff; }
.reg-st--on_hold { color: #ffb020; }
.reg-val { width: 92px; background: var(--input-bg); border: 1px solid transparent; border-radius: var(--radius); color: var(--ink); font-size: 0.82rem; padding: 3px 6px; text-align: right; }
.reg-val:hover { border-color: var(--ink-hair); }
.reg-val:focus { outline: none; border-color: var(--focus); }
.reg-valcell { white-space: nowrap; }
.reg-val-disp { cursor: pointer; font-size: 0.82rem; border-bottom: 1px dashed transparent; }
.reg-val-disp:hover { border-bottom-color: var(--ink-hair); }
.reg-deal-link { display: inline-block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-faint); text-decoration: none; }
.reg-deal-link:hover { color: var(--signal); }
.reg-region { font-size: 0.8rem; color: var(--ink-soft); white-space: nowrap; }
.reg-await { display: inline-block; margin-left: 6px; font-size: 0.6rem; color: #ffce85; vertical-align: middle; line-height: 1; cursor: default; }
.reg-table tr.is-awaiting td:first-child { box-shadow: inset 3px 0 0 var(--signal); }

/* finestra WhatsApp 24h: ⏳ sta per chiudersi · 🔒 chiusa (spenta, non compete col ⏳) */
.reg-w24 { display:inline-block; margin-left:4px; font-size:.72rem; vertical-align:middle; line-height:1; cursor:default; }
.reg-w24--closed { opacity:.55; filter:grayscale(.4); }

/* Badge fonte del contatto (un colore per etichetta) */
.fonte-badge { display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.03em; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid transparent; }
.fonte-badge--whatsapp { background: rgba(37,211,102,.13); color: #4fe39a; border-color: rgba(37,211,102,.32); }
.fonte-badge--form_web { background: rgba(110,160,255,.14); color: #9db9ff; border-color: rgba(110,160,255,.32); }
.fonte-badge--form_web_vlc { background: rgba(178,130,255,.15); color: #c6a8ff; border-color: rgba(178,130,255,.34); }
.fonte-badge--lead_glop { background: rgba(255,184,76,.14); color: #ffce85; border-color: rgba(255,184,76,.32); }
.fonte-badge--email { background: rgba(94,224,224,.13); color: #8fe5e5; border-color: rgba(94,224,224,.3); }
.fonte-badge--telefono { background: rgba(255,122,122,.14); color: #ff9d9d; border-color: rgba(255,122,122,.32); }

/* Changelog (pagina novità · sezione Sistema) */
.changelog__sub { color: var(--ink-faint); font-size: 0.92rem; margin: -0.4rem 0 var(--space-5); }
.changelog__day { padding: var(--space-4) 0; border-top: 1px solid var(--ink-hair); }
.changelog__day:first-of-type { border-top: 0; }
.changelog__date { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: var(--space-3); }
.changelog__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.changelog__item { display: flex; align-items: baseline; gap: 0.7rem; }
.changelog__text { color: var(--ink); font-size: 0.95rem; line-height: 1.4; }
.cl-badge { flex: none; display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; border: 1px solid transparent; min-width: 92px; text-align: center; }
.cl-badge--feat { background: rgba(37,211,102,.13); color: #4fe39a; border-color: rgba(37,211,102,.32); }
.cl-badge--fix { background: rgba(255,184,76,.14); color: #ffce85; border-color: rgba(255,184,76,.32); }
.cl-badge--improve { background: rgba(110,160,255,.14); color: #9db9ff; border-color: rgba(110,160,255,.32); }
.cl-badge--other { background: rgba(231,232,236,.06); color: var(--ink-soft); border-color: var(--ink-hair); }
.changelog__empty { color: var(--ink-faint); font-size: 0.95rem; padding: var(--space-6) 0; }

.reg-docs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 240px; }
.reg-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 0.7rem; background: var(--paper-2); border: 1px solid var(--ink-hair); border-radius: 5px; padding: 2px 4px 2px 7px; color: var(--ink-soft); }
.reg-chip button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 2px; }
.reg-chip button:hover { color: #ff8e9d; }
.reg-docadd { width: 64px; background: transparent; border: 1px dashed var(--ink-hair); border-radius: 5px; color: var(--ink); font-family: var(--font-mono); font-size: 0.7rem; padding: 2px 6px; }
.reg-docadd:focus { outline: none; border-color: var(--focus); border-style: solid; }

/* ─── Documenti del deal ────────────────────────────────────────────── */
.doc-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid var(--ink-hair); font-size: 0.85rem; }
.doc-row:last-of-type { border-bottom: 0; }
.doc-add { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--ink-hair); }
.doc-add .select { width: auto; flex: 0 0 auto; }
.doc-add .input { flex: 1 1 140px; min-width: 120px; }
.doc-add input[type="date"] { flex: 0 0 auto; }
.doc-file { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; }
.doc-file a:first-child { color: var(--blue-dk); }
.doc-attach__lbl { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); cursor: pointer; border: 1px dashed var(--ink-hair); border-radius: var(--radius); padding: 4px 8px; white-space: nowrap; }
.doc-attach__lbl:hover { border-color: var(--line-2); color: var(--ink); }
.doc-attach__lbl input[type="file"] { display: none; }
.doc-add__file { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); white-space: nowrap; }
.doc-add__file input[type="file"] { font-size: 0.72rem; max-width: 160px; }
.reg-chip__file { text-decoration: none; margin-right: 2px; }

/* ─── App shell con sidebar (porting prototipo) ──────────────────── */
.app { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side { background: #0b0c0f; border-right: 1px solid var(--ink-hair); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--ink-hair); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand__mk { width: 30px; height: 30px; border-radius: 7px; background: var(--signal); display: grid; place-items: center; flex: none; box-shadow: 0 6px 18px -6px rgba(255,225,77,.5); }
.brand__mk img { width: 19px; height: 19px; object-fit: contain; display: block; }
.brand__t b { font-family: var(--font-display); font-size: 14px; font-weight: 600; display: block; letter-spacing: -.02em; color: var(--ink); }
.brand__t small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.nav { padding: 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav__lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); padding: 14px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--radius); color: var(--ink-soft); font-size: 13.5px; font-weight: 500; text-decoration: none; position: relative; transition: .15s var(--ease); }
.nav a svg { width: 17px; height: 17px; opacity: .8; flex: none; }
.nav a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.nav a.on { color: var(--ink); background: linear-gradient(90deg, rgba(255,225,77,.10), transparent); }
.nav a.on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 3px; background: var(--signal); }
.nav a.on svg { opacity: 1; color: var(--signal); }
/* caret a blocco giallo lampeggiante (stile terminale) dopo la voce attiva */
.nav a.on::after { content: ""; width: 6px; height: 1.02em; margin-left: -7px; background: var(--signal); border-radius: 1px; animation: nav-caret 1.05s step-end infinite; }
@keyframes nav-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .nav a.on::after { animation: none; } }
.side__user { margin: 12px; padding: 10px 12px; border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); display: flex; align-items: center; gap: 10px; background: var(--raised); }
.side__av { width: 30px; height: 30px; border-radius: 50%; background: var(--signal); color: #111; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; flex: none; }
.side__user b { font-size: 12.5px; display: block; }
.side__user small { color: var(--ink-faint); font-size: 11px; }
.side__logout { background: none; border: 0; color: var(--ink-faint); cursor: pointer; margin-left: auto; display: grid; place-items: center; padding: 4px; }
.side__logout:hover { color: var(--c-red); }
.side__logout svg { width: 16px; height: 16px; }
.main { display: flex; flex-direction: column; min-width: 0; }
.appbar { height: 58px; border-bottom: 1px solid var(--ink-hair); display: flex; align-items: center; gap: 14px; padding: 0 22px; flex: none; position: sticky; top: 0; background: rgba(13,14,17,.82); backdrop-filter: blur(8px); z-index: 50; }
.appbar__search { position: relative; flex: 1; max-width: 420px; }
.appbar__search input { width: 100%; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); color: var(--ink); font-family: var(--font-body); font-size: 13px; padding: 9px 12px 9px 34px; }
.appbar__search input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(110,160,255,.16); }
.appbar__search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-faint); }
.icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius); border: 1px solid var(--ink-hair); background: var(--raised); cursor: pointer; color: var(--ink-soft); position: relative; }
.icon-btn:hover { color: var(--ink); border-color: var(--line-2); }
.icon-btn svg { width: 17px; height: 17px; }
/* Badge contatore "nuovi lead automatici" (sostituisce il vecchio pallino fisso). */
.notif__dot { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; line-height: 1; color: var(--on-accent); background: var(--signal); border-radius: 999px; border: 2px solid var(--paper); box-shadow: 0 0 7px rgba(255,225,77,0.5); }
.notif__dot.is-alert { color: #fff; background: var(--c-red); box-shadow: 0 0 7px rgba(255,93,115,0.55); }
.notif__dot[hidden] { display: none; }
/* Quando ci sono notifiche non lette la campanella "suona" ogni ~7s per farsi notare. */
@keyframes notif-wiggle {
    0%, 14%, 100% { transform: rotate(0); }
    2%  { transform: rotate(-15deg); }
    4%  { transform: rotate(13deg); }
    6%  { transform: rotate(-10deg); }
    8%  { transform: rotate(7deg); }
    10% { transform: rotate(-4deg); }
    12% { transform: rotate(2deg); }
}
.icon-btn.notif.has-unread svg { animation: notif-wiggle 7s ease-in-out infinite; transform-origin: 50% 20%; }
@media (prefers-reduced-motion: reduce) { .icon-btn.notif.has-unread svg { animation: none; } }

/* Campanella come pulsante (neutralizza i default del <button>) */
button.icon-btn { font: inherit; appearance: none; -webkit-appearance: none; padding: 0; }

/* Tendina notifiche (campanella unica: lead + catalogo) */
.notif-wrap { position: relative; }
.notif-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; z-index: 80;
  background: var(--raised); border: 1px solid var(--ink-hair);
  border-radius: var(--radius-lg); padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.notif-menu[hidden] { display: none; }
.notif-menu__item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius);
  color: var(--ink); text-decoration: none; font-size: 0.85rem;
}
.notif-menu__item:hover { background: var(--hover); text-decoration: none; }
.notif-menu__label { flex: 1; white-space: nowrap; }
.notif-menu__count {
  min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 999px;
  background: var(--signal); color: var(--on-accent); font-family: var(--font-mono);
  font-weight: 700; font-size: 0.7rem; line-height: 1.5;
}
.notif-menu__count.is-alert { background: var(--c-red); color: #fff; }
.notif-menu__count[hidden] { display: none; }
.content { flex: 1; overflow: auto; padding: 26px 28px 60px; }
.content__in { max-width: none; }
@media (min-width: 1700px) { .content { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 820px) { .app { grid-template-columns: 1fr; } .side { display: none; } }

/* ===================================================================
   Appunti interni dei deal — pulsante in tabella + drawer
   =================================================================== */
.reg-talk { width: 1%; white-space: nowrap; text-align: center; }
.dc-btn { display: inline-flex; align-items: center; gap: 4px; background: none; border: 1px solid var(--ink-hair); border-radius: var(--radius); color: var(--ink-faint); cursor: pointer; padding: 4px 6px; transition: color var(--dur-fast), border-color var(--dur-fast); }
.dc-btn:hover { color: var(--ink); border-color: var(--line-2); }
.dc-btn svg { width: 16px; height: 16px; }
.dc-badge { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; line-height: 1.4; background: var(--signal); color: var(--on-accent); border-radius: var(--radius-pill); padding: 0 5px; }

.dc-overlay { position: fixed; inset: 0; z-index: 190; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur) var(--ease), visibility var(--dur); }
.dc-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.dc-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw); z-index: 200; background: var(--raised); border-left: 1px solid var(--line-2); box-shadow: -18px 0 40px rgba(0,0,0,0.35); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--dur) var(--ease); }
.dc-drawer.is-open { transform: none; }
.dc-drawer__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--ink-hair); flex: none; }
.dc-drawer__titles { display: flex; flex-direction: column; min-width: 0; }
.dc-drawer__titles b { font-size: 0.95rem; }
.dc-drawer__deal { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-close { margin-left: auto; background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 4px 8px; border-radius: var(--radius); }
.dc-close:hover { color: var(--ink); background: var(--hover); }

/* Chat agganciata (docked) nella pagina deal */
.deal-hub { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--space-6); align-items: start; }
.deal-hub__main { min-width: 0; }
.deal-hub__chat { position: sticky; top: var(--space-4); height: calc(100vh - 130px); display: flex; flex-direction: column; gap: var(--space-4); }
.dc-drawer--docked { position: static; height: 100%; width: 100%; z-index: auto; transform: none; box-shadow: none; border: 1px solid var(--line-2); border-radius: var(--radius); }
.deal-hub__chat .dc-drawer--docked { flex: 1; min-height: 0; height: auto; }
@media (max-width: 1100px) {
    .deal-hub { grid-template-columns: 1fr; }
    .deal-hub__chat { position: static; height: 560px; }
}

/* Riepilogo qualifica spostato in sidebar, sopra Appunti (deals/edit) */
.qlside { flex: none; }
.qlside__body { max-height: 38vh; overflow-y: auto; }

.dc-feed { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.dc-loading, .dc-empty { color: var(--ink-faint); font-size: 0.85rem; text-align: center; padding: var(--space-5) var(--space-3); }

.dc-msg { display: flex; gap: 10px; align-items: flex-start; }
.dc-msg__av { flex: none; }
.dc-msg__main { flex: 1; min-width: 0; }
.dc-msg__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.8rem; }
.dc-msg__head b { color: var(--ink); }
.dc-msg__time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--ink-faint); }
.dc-msg__edited { font-size: 0.68rem; color: var(--ink-faint); }
.dc-msg__actions { margin-left: auto; display: inline-flex; gap: 6px; opacity: 0; transition: opacity var(--dur-fast); }
.dc-msg:hover .dc-msg__actions { opacity: 1; }
.dc-msg__actions button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 0.72rem; padding: 0; }
.dc-msg__actions button:hover { color: var(--ink); }
.dc-msg__actions button[data-act="del"]:hover { color: var(--red-dk); }
.dc-msg__body { margin-top: 3px; font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.dc-msg__body p { margin: 0.3em 0; }
.dc-msg__body ul, .dc-msg__body ol { padding-left: 1.3em; margin: 0.3em 0; }
.dc-msg__body a { color: var(--blue-dk); }
.dc-msg__body img { max-width: 100%; height: auto; border-radius: var(--radius); display: block; margin: 0.45em 0; border: 1px solid var(--ink-hair); cursor: zoom-in; }
.dc-msg__atts { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }

.dc-attach-chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 0.7rem; background: var(--paper-2); border: 1px solid var(--ink-hair); border-radius: 5px; padding: 3px 8px; color: var(--ink-soft); text-decoration: none; }
.dc-attach-chip:hover { color: var(--ink); border-color: var(--line-2); }
.dc-attach-chip--pending button { background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 0.85rem; line-height: 1; padding: 0 0 0 2px; }
.dc-attach-chip--pending button:hover { color: var(--red-dk); }

.dc-attach-audio { display: flex; flex-direction: column; gap: 3px; max-width: 320px; }

/* ─── Player audio custom (note vocali) ─────────────────────────────
   Sostituisce i controlli nativi del browser (che con poca larghezza
   collassano in un menu a puntini). Condiviso da chat WhatsApp (.ql-*)
   e Appunti (.dc-*): markup iniettato da public/js/audio-player.js. */
.aud-player { display: flex; align-items: center; gap: 9px; width: 270px; max-width: 100%; margin-top: 4px; padding: 7px 12px; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius-pill); }
.aud-player audio { display: none; }

.aud-player__btn { flex: none; width: 20px; height: 20px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--c-green); transition: opacity var(--dur-fast) var(--ease); }
.aud-player__btn:hover { opacity: .8; }

.aud-player__ico-play { width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.aud-player__ico-pause { display: none; position: relative; width: 9px; height: 11px; }
.aud-player__ico-pause::before, .aud-player__ico-pause::after { content: ''; position: absolute; top: 0; width: 3px; height: 11px; background: currentColor; border-radius: 1px; }
.aud-player__ico-pause::before { left: 0; }
.aud-player__ico-pause::after { right: 0; }
.aud-player.is-playing .aud-player__ico-play { display: none; }
.aud-player.is-playing .aud-player__ico-pause { display: block; }

.aud-player__mid { flex: 1 1 auto; min-width: 0; display: flex; }
.aud-player__track { position: relative; width: 100%; height: 14px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
/* Linea semplice (non una waveform reale): binario grigio + avanzamento verde. */
.aud-player__wave { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ink-hair); border-radius: var(--radius-pill); }
.aud-player__fill { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0%; background: var(--c-green); border-radius: var(--radius-pill); pointer-events: none; }
.aud-player__thumb { position: absolute; top: 50%; left: 0%; width: 9px; height: 9px; margin-top: -4.5px; margin-left: -4.5px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px var(--input-bg); pointer-events: none; }
.aud-player.is-error .aud-player__track { opacity: .4; cursor: not-allowed; }

.aud-player__time { flex: none; font-family: var(--font-mono); font-size: 0.62rem; color: var(--ink-faint); letter-spacing: .01em; white-space: nowrap; }

.aud-player__dl { flex: none; width: 18px; height: 18px; padding: 0; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-faint); opacity: .8; transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.aud-player__dl:hover { opacity: 1; color: var(--ink-soft); }
.aud-player__dl-ico { position: relative; width: 11px; height: 11px; }
.aud-player__dl-ico::before { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 6px; background: currentColor; transform: translateX(-50%); }
.aud-player__dl-ico::after { content: ''; position: absolute; left: 50%; top: 4px; width: 0; height: 0; border-style: solid; border-width: 4.5px 3.5px 0 3.5px; border-color: currentColor transparent transparent transparent; transform: translateX(-50%); }
.aud-player__dl-base { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; border-radius: 1px; }

.dc-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.88); display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.dc-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.dc-lightbox__img { max-width: min(90vw, 1200px); max-height: 90vh; display: block; border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,.6); cursor: default; }
.dc-lightbox__close { position: absolute; top: 16px; right: 20px; background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 1.1rem; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }

.dc-composer { flex: none; border-top: 1px solid var(--ink-hair); padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 8px; background: var(--paper); }
.dc-toolbar { display: flex; gap: 4px; }
.dc-toolbar button { width: 28px; height: 28px; display: grid; place-items: center; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); color: var(--ink-soft); cursor: pointer; font-size: 0.82rem; }
.dc-toolbar button:hover { color: var(--ink); border-color: var(--line-2); }
.dc-editor { min-height: 80px; max-height: 200px; overflow-y: auto; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; }
.dc-editor:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(110,160,255,0.16); }
.dc-editor:empty::before { content: attr(data-placeholder); color: var(--ink-faint); }
.dc-editor img { max-width: 100%; height: auto; border-radius: var(--radius); margin: 4px 0; }
.dc-editor--edit { min-height: 60px; }
.dc-attachbar { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-attachbar:empty { display: none; }
.dc-composer__foot { display: flex; align-items: center; gap: 8px; }
.dc-attachbtn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ink-hair); border-radius: var(--radius); background: var(--raised); color: var(--ink-soft); cursor: pointer; }
.dc-attachbtn:hover { color: var(--ink); border-color: var(--line-2); }
.dc-attachbtn svg { width: 17px; height: 17px; }
.dc-edit { margin-top: 4px; display: flex; flex-direction: column; gap: 6px; }
.dc-edit__foot { display: flex; gap: 6px; justify-content: flex-end; }

/* =====================================================================
   Assistente AI (chatbot interno) — launcher flottante + pannello chat.
   Riusa il vocabolario visivo di .dc-* sul tema dark.
   ===================================================================== */
.ai-fab {
    position: fixed; right: 22px; bottom: 22px; z-index: 300;
    width: 52px; height: 52px; border-radius: 50%;
    display: grid; place-items: center; cursor: pointer;
    background: var(--signal); color: var(--on-accent);
    border: 1px solid rgba(0,0,0,0.2);
    box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,225,77,0.10);
    transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
    /* "alone di energia" giallo che pulsa lentamente quando il chatbot è chiuso */
    animation: ai-fab-glow 3.2s ease-in-out infinite;
}
/* Onda di energia che si espande e svanisce dietro l'icona */
.ai-fab::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
    background: radial-gradient(circle, rgba(255,225,77,0.55) 0%, rgba(255,225,77,0) 70%);
    animation: ai-fab-halo 3.2s ease-out infinite;
    pointer-events: none;
}
@keyframes ai-fab-glow {
    0%, 100% { box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 4px rgba(255,225,77,0.12), 0 0 14px 2px rgba(255,225,77,0.22); }
    50%      { box-shadow: 0 8px 26px rgba(0,0,0,0.45), 0 0 0 6px rgba(255,225,77,0.22), 0 0 36px 10px rgba(255,225,77,0.55); }
}
@keyframes ai-fab-halo {
    0%   { transform: scale(1);   opacity: 0.6; }
    70%  { opacity: 0; }
    100% { transform: scale(2.1); opacity: 0; }
}
.ai-fab:hover { transform: translateY(-2px) scale(1.04); }
.ai-fab svg { width: 26px; height: 26px; }
/* A pannello aperto l'icona sparisce: niente pulse */
.ai-root.is-open .ai-fab { opacity: 0; pointer-events: none; transform: scale(0.6); animation: none; }
.ai-root.is-open .ai-fab::after { display: none; }
/* Chat drawer aperta: nasconde tutto il widget AI */
body.drawer-open .ai-root { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
@media (prefers-reduced-motion: reduce) {
    .ai-fab { animation: none; }
    .ai-fab::after { display: none; }
}

.ai-panel {
    --font-term: "JetBrains Mono", "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    position: fixed; right: 22px; bottom: 22px; z-index: 300;
    width: min(420px, calc(100vw - 32px));
    height: min(660px, calc(100vh - 90px));
    display: flex; flex-direction: column; overflow: hidden;
    background: linear-gradient(180deg, var(--paper-2), var(--paper));
    border: 1px solid var(--line-2); border-radius: var(--radius);
    box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 60px -22px rgba(255,225,77,0.18);
    font-family: var(--font-term);
    /* entrata: solo transform + visibility, MAI opacity sul contenuto (evita il bug "pannello invisibile") */
    visibility: hidden; pointer-events: none;
    transform: translateY(14px) scale(0.985); transform-origin: bottom right;
    transition: transform var(--dur) var(--ease), visibility var(--dur);
}
.ai-panel.is-open { visibility: visible; pointer-events: auto; transform: none; }
/* CRT sottile: scanline + vignette (non catturano il puntatore) */
.ai-panel::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7; border-radius: inherit;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
}
.ai-panel::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7; border-radius: inherit;
    box-shadow: inset 0 0 90px rgba(0,0,0,0.45);
}

/* ── titlebar ── */
.ai-panel__head.ai-tt {
    display: flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 10px; flex: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0));
    border-bottom: 1px solid var(--ink-hair);
    position: relative; z-index: 8;
}
.ai-tt__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 9px rgba(255,225,77,0.6); }
.ai-tt__name { font-family: var(--font-term); font-size: 0.78rem; font-weight: 600; color: #e9edf3; letter-spacing: .2px; }
/* path occupa lo spazio libero → spinge budget + controlli a destra (anche con budget nascosto) */
.ai-tt__path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-term); font-size: 0.7rem; color: var(--ink-faint); }
.ai-tt__path b { color: var(--signal); font-weight: 500; }
.ai-tt__controls { flex: none; display: inline-flex; align-items: center; gap: 3px; }
.ai-budget {
    font-family: var(--font-term); font-size: 0.6rem; letter-spacing: .3px;
    color: var(--ink-faint); background: rgba(0,0,0,0.3); border: 1px solid var(--ink-hair);
    border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.ai-budget:empty { display: none; }
.ai-budget.is-over { color: var(--on-accent); background: var(--red-dk); border-color: transparent; }
.ai-iconbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 18px; border-radius: 4px; cursor: pointer;
    background: none; border: 1px solid transparent; color: var(--ink-faint);
    font-size: 0.82rem; line-height: 1; padding: 0; transition: all var(--dur-fast);
}
.ai-iconbtn:hover { color: var(--ink); background: rgba(255,255,255,0.06); border-color: var(--ink-hair); }
.ai-iconbtn--close:hover { color: #fff; background: var(--red-dk); border-color: var(--red-dk); }

/* ── meta strip ── */
.ai-meta {
    display: flex; align-items: center; height: 24px; padding: 0 10px; flex: none; overflow: hidden;
    border-bottom: 1px solid var(--ink-hair); background: rgba(0,0,0,0.25);
    font-family: var(--font-term); font-size: 0.6rem; color: var(--ink-faint);
    position: relative; z-index: 8;
}
.ai-meta__item { display: inline-flex; align-items: center; gap: 5px; height: 100%; padding: 0 9px; border-right: 1px solid var(--ink-hair); white-space: nowrap; }
.ai-meta__item:first-child { padding-left: 0; }
.ai-meta__item b { color: var(--ink-soft); font-weight: 500; }
.ai-meta__item--live b { color: var(--c-green); }
.ai-meta__dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 6px var(--c-green); animation: ai-meta-blink 1.6s ease-in-out infinite; }
@keyframes ai-meta-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── feed (log) ── */
.ai-feed { flex: 1; overflow-y: auto; padding: 14px 14px 8px; display: flex; flex-direction: column; gap: 13px; font-family: var(--font-term); font-size: 0.78rem; line-height: 1.6; position: relative; z-index: 4; scroll-behavior: smooth; }
.ai-feed::-webkit-scrollbar { width: 9px; }
.ai-feed::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; }
.ai-feed::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: padding-box; }

/* ── boot sequence ── */
.ai-boot { display: flex; flex-direction: column; gap: 2px; color: var(--ink-faint); font-size: 0.72rem; line-height: 1.65; }
.ai-boot__line { white-space: pre-wrap; }
.ai-boot__line .ok { color: var(--c-green); }
.ai-boot__line .hl { color: var(--signal); }

/* ── messaggio = riga di terminale ── */
.ai-line { display: flex; flex-direction: column; gap: 4px; animation: ai-line-in 0.24s ease-out; }
@keyframes ai-line-in { from { transform: translateY(5px); } to { transform: none; } }
.ai-line__head { display: flex; align-items: center; gap: 7px; font-size: 0.62rem; letter-spacing: .3px; }
.ai-line__role { font-weight: 700; }
.ai-line--ai .ai-line__role { color: var(--signal); text-shadow: 0 0 12px rgba(255,225,77,0.35); }
.ai-line--me .ai-line__role { color: var(--focus); }
.ai-line--sys .ai-line__role { color: var(--ink-faint); }
.ai-line__ts { margin-left: auto; color: var(--ink-faint); font-size: 0.58rem; }
.ai-line__body { color: var(--ink-soft); overflow-wrap: anywhere; border-left: 2px solid var(--ink-hair); padding-left: 10px; margin-left: 1px; }
.ai-line--ai .ai-line__body { border-left-color: rgba(255,225,77,0.45); }
.ai-line--me .ai-line__body { border-left-color: rgba(110,160,255,0.45); color: var(--ink); }
.ai-line__body p { margin: 0.3em 0; }
.ai-line__body p:first-child { margin-top: 0; }
.ai-line__body p:last-child { margin-bottom: 0; }
.ai-line__body ul { padding-left: 1.2em; margin: 0.3em 0; }
.ai-line__body strong, .ai-line__body b { color: #fff; font-weight: 700; }
.ai-line__body em { color: var(--focus); font-style: normal; }
.ai-line__body code { font-family: var(--font-term); font-size: 0.92em; color: var(--signal); background: rgba(0,0,0,0.35); padding: 1px 5px; border-radius: 3px; }
.ai-cmd { color: var(--signal); cursor: pointer; border-bottom: 1px dotted rgba(255,225,77,0.5); }
.ai-cmd:hover { border-bottom-style: solid; }
.ai-tbl { border-collapse: collapse; width: 100%; margin: 0.4em 0; font-size: 0.92em; }
.ai-tbl th, .ai-tbl td { border: 1px solid var(--ink-hair); padding: 3px 7px; text-align: left; }
.ai-tbl th { color: var(--ink); font-family: var(--font-term); }

/* ── suggestion chips ── */
.ai-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-left: 11px; }
.ai-chip { font-family: var(--font-term); font-size: 0.7rem; color: var(--ink-soft); background: rgba(255,255,255,0.02); border: 1px solid var(--ink-hair); border-radius: 5px; padding: 5px 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--dur-fast); }
.ai-chip::before { content: "\276F"; color: var(--signal); font-weight: 700; }
.ai-chip:hover { color: #fff; border-color: rgba(255,225,77,0.5); background: rgba(255,225,77,0.06); }

/* ── typing → cursore a blocco ── */
.ai-typing .ai-line__body { color: var(--ink-faint); }
.ai-cursor { display: inline-block; width: 8px; height: 14px; background: var(--signal); vertical-align: -2px; animation: ai-cursor-blink 1s steps(1) infinite; }
@keyframes ai-cursor-blink { 50% { opacity: 0; } }

/* ── composer = prompt ── */
.ai-composer { flex: none; border-top: 1px solid var(--ink-hair); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(0deg, rgba(255,255,255,0.018), transparent); position: relative; z-index: 8; }
.ai-composer__row { display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.4); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 0 6px 0 10px; min-height: 42px; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.ai-composer__row:focus-within { border-color: rgba(255,225,77,0.55); box-shadow: 0 0 0 3px rgba(255,225,77,0.1); }
.ai-prompt { flex: none; color: var(--signal); font-family: var(--font-term); font-size: 0.74rem; font-weight: 700; white-space: nowrap; user-select: none; text-shadow: 0 0 12px rgba(255,225,77,0.4); }
.ai-input { flex: 1; min-width: 0; resize: none; min-height: 30px; max-height: 130px; overflow-y: auto; background: transparent; border: 0; padding: 9px 0; color: #eef1f5; font-family: var(--font-term); font-size: 0.8rem; line-height: 1.45; caret-color: var(--signal); }
.ai-input:focus { outline: none; }
.ai-input:disabled { opacity: 0.6; cursor: not-allowed; }
.ai-send { flex: none; width: 30px; height: 30px; border-radius: 5px; display: grid; place-items: center; cursor: pointer; background: var(--signal); color: var(--on-accent); border: 0; }
.ai-send:hover { filter: brightness(1.05); box-shadow: 0 0 16px rgba(255,225,77,0.4); }
.ai-send:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.ai-send svg { width: 15px; height: 15px; }

@media (max-width: 560px) {
    .ai-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(80vh, 660px); }
    .ai-fab { right: 16px; bottom: 16px; }
    .ai-prompt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ai-panel { transition: none; }
    .ai-line { animation: none; }
    .ai-meta__dot, .ai-cursor { animation: none; }
}

/* ── Ingrandimento + ridimensionamento ── */
.ai-panel--max { width: min(980px, 94vw); height: calc(100vh - 56px); }
.ai-resize { position: absolute; top: 0; left: 0; width: 18px; height: 18px; cursor: nwse-resize; z-index: 9; touch-action: none; }
.ai-resize::before { content: ""; position: absolute; top: 6px; left: 6px; width: 8px; height: 8px; border-top: 2px solid var(--ink-faint); border-left: 2px solid var(--ink-faint); border-top-left-radius: 3px; }
.ai-panel--max .ai-resize { display: none; }
.ai-panel.is-drop { outline: 2px dashed var(--signal); outline-offset: -4px; }

/* ── status bar ── */
.ai-statusbar { display: flex; align-items: center; height: 22px; flex: none; border-top: 1px solid var(--ink-hair); background: rgba(0,0,0,0.3); font-family: var(--font-term); font-size: 0.58rem; color: var(--ink-faint); padding: 0 10px; position: relative; z-index: 8; }
.ai-stat { display: inline-flex; align-items: center; gap: 5px; padding: 0 10px; height: 100%; border-right: 1px solid var(--ink-hair); white-space: nowrap; }
.ai-stat:last-child { border-right: 0; }
.ai-stat--spacer { flex: 1; border-right: 0; padding: 0; }
.ai-stat--badge { color: var(--on-accent); background: var(--c-green); font-weight: 700; padding: 0 8px; border-right: 0; }
.ai-statusbar.is-busy .ai-stat--badge { background: var(--signal); }

/* ── composer: bottone allega (ghost) ── */
.ai-attachbtn { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--ink-faint); cursor: pointer; transition: all var(--dur-fast); }
.ai-attachbtn:hover { color: var(--ink); background: rgba(255,255,255,0.06); border-color: var(--ink-hair); }
.ai-attachbtn.is-warn { border-color: var(--red-dk); color: var(--red-dk); }
.ai-attachbtn svg { width: 15px; height: 15px; }

/* ── allegati: chip sopra il prompt ── */
.ai-attachbar { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-attachbar:empty { display: none; }
.ai-attach-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 200px; background: rgba(0,0,0,0.3); border: 1px solid var(--ink-hair); border-radius: 4px; padding: 3px 6px; font-family: var(--font-term); font-size: 0.66rem; color: var(--ink-soft); }
.ai-attach-chip img { width: 24px; height: 24px; object-fit: cover; border-radius: 2px; flex: none; }
.ai-attach-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-attach-ico { flex: none; font-family: var(--font-term); font-size: 0.55rem; font-weight: 700; background: var(--signal); color: var(--on-accent); border-radius: 2px; padding: 2px 4px; }
.ai-attach-chip button { flex: none; background: none; border: 0; color: var(--ink-faint); cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0 0 0 2px; }
.ai-attach-chip button:hover { color: var(--red-dk); }

/* ── allegati mostrati nella riga operatore ── */
.ai-msg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ai-msg__atts:first-child { margin-top: 0; }
.ai-thumb { max-width: 150px; max-height: 150px; border-radius: 4px; border: 1px solid var(--ink-hair); display: block; }
.ai-filechip { display: inline-flex; align-items: center; font-family: var(--font-term); font-size: 0.66rem; background: rgba(0,0,0,0.3); border: 1px solid var(--ink-hair); border-radius: 4px; padding: 3px 8px; color: var(--ink-soft); }

/* ── Budget AI nell'appbar (sempre in vista) ── */
.ai-budget-chip {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    font-family: var(--font-mono); font-size: 0.72rem; line-height: 1;
    color: var(--ink-soft); background: var(--paper-2);
    border: 1px solid var(--ink-hair); border-radius: var(--radius-pill);
    padding: 6px 11px; cursor: pointer; white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ai-budget-chip:hover { color: var(--ink); border-color: var(--line-2); }
.ai-budget-chip svg { width: 13px; height: 13px; color: var(--signal); flex: none; }
.ai-budget-chip b { color: var(--ink); font-weight: 700; }
.ai-budget-chip.is-warn { border-color: rgba(255,210,77,0.45); }
.ai-budget-chip.is-warn b, .ai-budget-chip.is-warn svg { color: #ffd24d; }
.ai-budget-chip.is-over { background: var(--red-dk); border-color: transparent; color: var(--on-accent); }
.ai-budget-chip.is-over b, .ai-budget-chip.is-over svg { color: var(--on-accent); }
@media (max-width: 720px) { .ai-budget-chip > span { display: none; } }

/* ── Card di conferma scritture AI (Fase 2) — stile terminale ─────── */
.ai-proposal { margin: 4px 0; border: 1px solid var(--ink-hair); border-left: 2px solid rgba(255,225,77,0.5); border-radius: var(--radius); background: rgba(0,0,0,0.25); padding: 10px 12px; font-family: var(--font-term); font-size: 0.74rem; }
.ai-proposal__title { font-weight: 700; margin-bottom: 6px; color: var(--ink); }
.ai-proposal__rows { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.ai-proposal__row { display: flex; gap: 8px; }
.ai-proposal__k { flex: 0 0 92px; color: var(--ink-faint); }
.ai-proposal__v { flex: 1; color: var(--ink); word-break: break-word; }
.ai-proposal__btns { display: flex; gap: 8px; }
.ai-proposal__ok, .ai-proposal__no { border: 0; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-family: var(--font-term); font-weight: 700; font-size: 0.72rem; }
.ai-proposal__ok { background: var(--c-green); color: #06231a; }
.ai-proposal__no { background: transparent; color: var(--ink-faint); border: 1px solid var(--ink-hair); }
.ai-proposal__ok:disabled, .ai-proposal__no:disabled { opacity: 0.5; cursor: default; }
.ai-proposal__msg { margin-top: 6px; font-size: 0.72rem; }
.ai-proposal__msg a { color: var(--signal); }
.ai-proposal.is-ok { border-left-color: var(--c-green); }
.ai-proposal.is-err { border-left-color: #ff6b6b; }
.ai-proposal.is-done { opacity: 0.7; }

/* ── Chip stato ingest email (appbar, admin) ───────────────────── */
.ingest-chip {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    font-family: var(--font-mono); font-size: 0.72rem; line-height: 1;
    color: var(--ink-soft); background: var(--paper-2);
    border: 1px solid var(--ink-hair); border-radius: var(--radius-pill);
    padding: 6px 11px; text-decoration: none; white-space: nowrap;
    transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ingest-chip:hover { color: var(--ink); border-color: var(--line-2); }
.ingest-chip svg { width: 13px; height: 13px; flex: none; }
.ingest-chip b { font-weight: 700; }
.ingest-chip.is-ok svg, .ingest-chip.is-ok b { color: #3ddc97; }
.ingest-chip.is-warn { border-color: rgba(255,210,77,0.45); }
.ingest-chip.is-warn svg, .ingest-chip.is-warn b { color: #ffd24d; }
.ingest-chip.is-alert { background: var(--red-dk); border-color: transparent; color: var(--on-accent); }
.ingest-chip.is-alert svg, .ingest-chip.is-alert b { color: var(--on-accent); }
@media (max-width: 720px) { .ingest-chip > span { display: none; } }

/* ── Pagina Log ingest ─────────────────────────────────────────── */
.ingest-banner { border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; font-family: var(--font-mono); font-size: 0.78rem; }
.ingest-banner.is-warn { border-color: rgba(255,210,77,0.5); }
.ingest-banner.is-alert { border-color: #ff6b6b; background: rgba(255,80,80,0.08); }
.ingest-err { color: #ff8787; }
.ingest-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.ingest-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.ingest-table th, .ingest-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--ink-hair); }
.ingest-table tr.is-error { background: rgba(255,80,80,0.06); }
.ingest-table__err td { color: #ff8787; font-family: var(--font-mono); font-size: 0.72rem; }
.ing-badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 0.68rem; border: 1px solid var(--ink-hair); }
.ing-badge--processed { color: #3ddc97; } .ing-badge--noise { color: var(--ink-faint); }
.ing-badge--spam { color: #ff8787; } .ing-badge--error { color: #fff; background: var(--red-dk); }
.ing-badge--review { color: #ffd24d; border-color: rgba(255,210,77,0.45); }
.ing-drawer { position: fixed; right: 18px; bottom: 18px; max-width: 480px; max-height: 60vh; overflow: auto; background: var(--paper-2); border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px; z-index: 60; }
.ing-drawer pre { white-space: pre-wrap; word-break: break-word; font-size: 0.72rem; }

/* --- Catalogo hardware / Mio listino --- */
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); border-bottom: 1px solid var(--ink-hair); }
.tab { display: inline-flex; align-items: center; padding: 0.5rem 0.9rem; font-size: 0.86rem; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { text-decoration: none; color: var(--ink); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--signal); font-weight: var(--fw-medium); }
.cat-sub { color: var(--ink-faint); font-size: 0.72rem; }
.listino-subfilter { margin: 0 0 0 auto; } /* dropdown categoria allineato a destra nei filtri listino */
.cat-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; color: var(--ink-soft); }
.cm-new { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
.cm-desc { flex: 1; min-width: 220px; }
.cat-badge { display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill); font-size: 0.68rem; border: 1px solid var(--ink-hair); color: var(--ink-soft); white-space: nowrap; }
.cat-badge--available { color: #3ddc97; border-color: rgba(61,220,151,0.4); }
.cat-badge--out_of_stock { color: var(--ink-faint); }
.cat-badge--delisted { color: #ff8787; border-color: rgba(255,135,135,0.4); }
.cat-badge--low { color: #ffd24d; border-color: rgba(255,210,77,0.45); }
.reg-mini { width: 72px; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); color: var(--ink); font-size: 0.82rem; padding: 3px 6px; text-align: right; }
.reg-mini:focus { outline: none; border-color: var(--focus); }
.reg-mini:disabled { opacity: 0.45; }
tr.is-muted { opacity: 0.55; }
.nav-badge { display: inline-block; margin-left: 6px; min-width: 17px; padding: 0 5px; font-size: 0.64rem; font-weight: 700; line-height: 16px; text-align: center; color: #1a1206; background: #ffd24d; border-radius: var(--radius-pill, 999px); vertical-align: middle; }
/* Paginazione (vista custom resources/views/vendor/pagination/default.blade.php) */
.pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: var(--space-4); }
.pager__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 9px; font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; background: var(--input-bg, transparent); border: 1px solid var(--ink-hair); border-radius: var(--radius, 6px); }
.pager__btn:hover { color: var(--ink); border-color: var(--ink-soft); text-decoration: none; }
.pager__btn.is-active { color: var(--ink); border-color: var(--signal); font-weight: var(--fw-medium, 600); }
.pager__btn.is-disabled { opacity: 0.4; pointer-events: none; }
.pager__dots { padding: 0 4px; color: var(--ink-faint); }

/* --- Scheda prodotto (gallery + specifiche + descrizione) --- */
/* righe-elenco cliccabili verso la scheda */
.pg-rowlink { color: inherit; text-decoration: none; }
.pg-rowlink:hover { color: var(--signal); text-decoration: none; }

/* prezzo a destra nell'header */
.pg-price { margin-left: auto; text-align: right; }
.pg-price__val { font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.pg-price__lbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }

/* sidebar */
.pg-side { position: sticky; top: var(--space-4); }
@media (max-width: 900px) { .pg-side { position: static; } }

/* gallery */
/* La gallery non si allarga all'infinito su schermi grandi e l'altezza è limitata
   al viewport con un tetto fisso → l'immagine intera resta visibile senza scroll. */
.pg { max-width: 720px; margin-inline: auto; }
.pg-main { background: #0b0c0f; border: 1px solid var(--ink-hair); border-radius: var(--radius-lg); overflow: hidden; display: grid; place-items: center; height: min(56vh, 520px); }
.pg-main__img { width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.pg-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pg-thumb { width: 60px; height: 60px; padding: 0; background: #0b0c0f; border: 1px solid var(--ink-hair); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color var(--dur-fast); }
.pg-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-thumb:hover { border-color: var(--ink-soft); }
.pg-thumb.is-active { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.pg-empty { padding: var(--space-6); text-align: center; color: var(--ink-faint); font-size: 0.85rem; }

/* lightbox gallery (analogo a dc-lightbox, indipendente) */
.pg-lightbox { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s; }
.pg-lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.pg-lightbox__img { max-width: min(88vw, 1100px); max-height: 88vh; display: block; border-radius: var(--radius); box-shadow: 0 8px 40px rgba(0,0,0,.6); }
.pg-lightbox__close { position: absolute; top: 16px; right: 20px; }
.pg-lightbox__nav, .pg-lightbox__close { background: rgba(255,255,255,.12); border: none; color: #fff; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.pg-lightbox__nav:hover, .pg-lightbox__close:hover { background: rgba(255,255,255,.22); }
.pg-lightbox__prev { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); }
.pg-lightbox__next { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); }

/* tabella specifiche */
.spec-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.spec-table th { text-align: left; font-weight: var(--fw-medium); color: var(--ink-soft); padding: 7px 10px 7px 0; width: 42%; vertical-align: top; border-bottom: 1px solid var(--ink-hair); white-space: nowrap; }
.spec-table td { padding: 7px 0; color: var(--ink); border-bottom: 1px solid var(--ink-hair); }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }

/* descrizione HTML del fornitore */
.product-prose { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.6; }
.product-prose h2 { font-size: 1.05rem; color: var(--ink); margin: 0 0 0.5rem; }
.product-prose h3 { font-size: 0.95rem; color: var(--ink); margin: 1rem 0 0.4rem; }
.product-prose p { margin: 0 0 0.7rem; }
.product-prose ul, .product-prose ol { margin: 0 0 0.7rem; padding-left: 1.2rem; }
.product-prose li { margin: 0.2rem 0; }
.product-prose strong { color: var(--ink); }
.product-prose table { width: 100%; border-collapse: collapse; margin: 0 0 0.7rem; }
.product-prose td, .product-prose th { border: 1px solid var(--ink-hair); padding: 5px 8px; text-align: left; }

/* meta (dl chiave/valore) nella sidebar */
.pg-meta { margin: 0; display: flex; flex-direction: column; gap: 0; }
.pg-meta > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px solid var(--ink-hair); }
.pg-meta > div:last-child { border-bottom: 0; }
.pg-meta dt { color: var(--ink-faint); font-size: 0.78rem; margin: 0; }
.pg-meta dd { margin: 0; color: var(--ink); font-size: 0.86rem; text-align: right; }

/* gruppi di pulsanti / form add-listino nella sidebar */
.pg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.pg-actions form { margin: 0; }
.pg-addform { display: flex; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.pg-addform__lbl { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--ink-faint); }

/* =====================================================================
   Qualifica AI del deal (pannello in deals/edit) — partials/deal-qualifier.
   Riusa il vocabolario visivo di .dc-* sul tema dark (raised/line/ink/radius).
   ===================================================================== */
.ql-panel { padding: 0; }
.ql-root { display: flex; flex-direction: column; }

.ql-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--ink-hair); flex-wrap: wrap; }
.ql-bar__title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ql-bar__title svg { width: 18px; height: 18px; color: var(--signal); flex: none; }
.ql-bar__title b { font-size: 0.95rem; }
.ql-bar__actions { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }

.ql-status { font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--ink-hair); color: var(--ink-faint); background: var(--paper-2); }
.ql-status--active { color: var(--green-dk, #02ff95); border-color: rgba(2,255,149,0.35); background: rgba(2,255,149,0.08); }
.ql-status--idle { color: var(--ink-faint); }
.ql-status--done { color: var(--blue-dk, #7ea6ff); border-color: rgba(126,166,255,0.35); background: rgba(126,166,255,0.08); }
.ql-status--handoff { color: var(--signal); border-color: rgba(255,225,77,0.4); background: rgba(255,225,77,0.08); }
.ql-status--presidiado { color: var(--signal); border-color: rgba(255,225,77,0.4); background: rgba(255,225,77,0.12); }

/* Guardrail prezzi M2: cifra in bozza non riconducibile al listino del turno */
.ql-price-warn { margin: 6px 0 0; padding: 6px 10px; border: 1px solid rgba(255,225,77,0.5); border-radius: 6px; color: var(--signal); font-size: 12px; }

/* Meter consumo token/€ della conversazione (al posto di Aggiorna/Avvia/Pausa) */
.ql-tokens { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--ink-faint); padding: 2px 9px; border-radius: var(--radius-pill); border: 1px solid var(--ink-hair); background: var(--paper-2); white-space: nowrap; }
.ql-tokens__io { letter-spacing: .02em; }
.ql-tokens__sep { opacity: .45; }
.ql-tokens__eur { color: var(--ink); font-weight: 700; }

.ql-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-4); align-items: start; }
.ql-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

.ql-thread { max-height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2); background: var(--paper); border: 1px solid var(--ink-hair); border-radius: var(--radius); }
.ql-empty { color: var(--ink-faint); font-size: 0.85rem; text-align: center; padding: var(--space-5) var(--space-3); }

.ql-msg { max-width: 86%; display: flex; flex-direction: column; gap: 3px; padding: 8px 11px; border-radius: var(--radius); border: 1px solid var(--ink-hair); }
.ql-msg--lead { align-self: flex-start; background: var(--paper-2); }
.ql-msg--ai, .ql-msg--human { align-self: flex-end; background: var(--raised); border-color: var(--line-2); }
.ql-msg__head { display: flex; align-items: center; gap: 7px; }
.ql-msg__time { font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-faint); }
/* Etichetta di ritardo Meta (message.remote_sent_label): stessa tinta di attenzione di --signal, già usata per "⏳ Scaduto" */
.ql-msg__late { margin-left: .5rem; font-size: .72rem; color: var(--signal); opacity: .9; }
/* Spunte WhatsApp di recapito (solo messaggi in uscita) */
.ql-tick { font-size: 0.74rem; line-height: 1; letter-spacing: -1px; }
.ql-tick--sent, .ql-tick--delivered { color: var(--ink-faint); }
.ql-tick--read { color: var(--blue-dk, #4aa3ff); }
.ql-tick--failed { color: #ff6b6b; letter-spacing: 0; }
.ql-msg__body { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; white-space: pre-wrap; }

.ql-badge { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; line-height: 1.4; border-radius: var(--radius-pill); padding: 1px 7px; letter-spacing: .03em; }
.ql-badge--ai { background: var(--signal); color: var(--on-accent); }
.ql-badge--human { background: rgba(2,255,149,0.16); color: var(--green-dk, #02ff95); border: 1px solid rgba(2,255,149,0.3); }
.ql-badge--lead { background: var(--paper); color: var(--ink-faint); border: 1px solid var(--ink-hair); }

.ql-draft { display: flex; flex-direction: column; gap: 7px; padding: var(--space-3); border: 1px solid var(--signal); border-radius: var(--radius); background: rgba(255,225,77,0.05); }
.ql-draft__lbl { font-family: var(--font-mono); font-size: 0.68rem; color: var(--signal); text-transform: uppercase; letter-spacing: .03em; }
.ql-draft__txt { min-height: 70px; resize: vertical; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; }
.ql-draft__txt:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(110,160,255,0.16); }
.ql-draft__foot { display: flex; gap: 6px; justify-content: flex-end; }

.ql-reply { display: flex; flex-direction: column; gap: 6px; }
.ql-reply__txt { resize: vertical; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 8px 10px; color: var(--ink); font-family: var(--font-body); font-size: 0.88rem; line-height: 1.5; width: 100%; box-sizing: border-box; }
.ql-reply__txt:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(110,160,255,0.16); }
.ql-reply__bar { display: flex; align-items: center; gap: 8px; }
.ql-reply__bar .btn--primary { margin-left: auto; }
.ql-reply__files { font-size: 0.78rem; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
/* Bottone "Allega": icona graffetta + etichetta, ben visibile a sinistra della barra. */
.ql-attach { display: inline-flex; align-items: center; gap: 6px; padding: 0.42rem 0.7rem; background: var(--input-bg); color: var(--ink); border: 1px solid var(--ink-hair); border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: 0.82rem; font-weight: var(--fw-medium); line-height: 1; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); white-space: nowrap; }
.ql-attach:hover { border-color: var(--signal); background: var(--hover); color: var(--ink); }
.ql-attach svg { width: 16px; height: 16px; flex: none; }
.ql-mic:hover { border-color: var(--c-green); }
.ql-mic[disabled] { opacity: .55; cursor: default; }

/* Striscia nota vocale (registrazione + anteprima) sopra il compositore. */
.ql-voice { margin-bottom: 2px; }
.ql-voice__rec, .ql-voice__prev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: var(--radius); }
.ql-voice__dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5d73; flex: none; animation: ql-rec-pulse 1.1s ease-in-out infinite; }
.ql-voice__time { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); color: var(--ink); }
.ql-voice__lbl { color: var(--ink-faint); font-size: 0.82rem; flex: 1; min-width: 0; }
.ql-voice__rec .btn--primary { margin-left: auto; }
.ql-voice__audio { height: 36px; flex: 1; min-width: 120px; }
@keyframes ql-rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ql-voice__dot { animation: none; } }

/* toolbar formattazione WhatsApp + emoji (compositore "Scrivi al lead" e bozza AI) */
.ql-fmt { position: relative; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.ql-fmt-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 26px; padding: 0 7px; background: var(--input-bg); color: var(--ink-soft); border: 1px solid var(--ink-hair); border-radius: var(--radius); cursor: pointer; font-family: var(--font-body); font-size: 0.82rem; line-height: 1; transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast); }
.ql-fmt-btn:hover { border-color: var(--signal); background: var(--hover); color: var(--ink); }
.ql-fmt-b { font-weight: 700; }
.ql-fmt-i { font-style: italic; font-family: Georgia, serif; }
.ql-fmt-s { text-decoration: line-through; }
.ql-fmt-m { font-family: var(--font-mono); font-size: 0.72rem; }
.ql-fmt-emoji { font-size: 0.98rem; }
.ql-fmt-sep { width: 1px; align-self: stretch; margin: 2px; background: var(--ink-hair); }
.ql-emoji-pop { position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40; width: 286px; max-height: 218px; overflow-y: auto; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 8px; background: var(--paper); border: 1px solid var(--ink-hair); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.ql-emoji-cell { display: flex; align-items: center; justify-content: center; height: 30px; padding: 0; background: transparent; border: none; border-radius: 6px; cursor: pointer; font-size: 1.12rem; line-height: 1; }
.ql-emoji-cell:hover { background: var(--hover); }

/* resa della formattazione WhatsApp nelle bolle del thread */
.ql-msg__body strong { font-weight: 700; color: var(--ink); }
.ql-msg__body em { font-style: italic; }
.ql-msg__body del { opacity: .7; }
.ql-msg__body code.ql-mono { font-family: var(--font-mono); font-size: 0.82rem; background: var(--input-bg); border: 1px solid var(--ink-hair); border-radius: 4px; padding: 0 4px; white-space: pre-wrap; }
.ql-msg__body blockquote.ql-quote { margin: 3px 0; padding: 1px 0 1px 9px; border-left: 3px solid var(--ink-hair); color: var(--ink-faint); }
.ql-msg__body ul.ql-ul, .ql-msg__body ol.ql-ol { margin: 3px 0; padding-left: 1.35em; }
.ql-msg__body li { margin: 1px 0; }

.ql-msg__atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ql-att-img { display: block; max-width: 180px; max-height: 140px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--ink-hair); cursor: pointer; transition: opacity .15s; }
.ql-att-img:hover { opacity: .85; }
.ql-att-file { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; color: var(--blue-dk, #7ea6ff); text-decoration: none; border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: 3px 8px; background: var(--paper); }
.ql-att-file:hover { background: var(--paper-2); text-decoration: underline; }

.ql-summary { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.86rem; }
.ql-sum-block { border: 1px solid var(--ink-hair); border-radius: var(--radius); padding: var(--space-3); background: var(--paper); }
.ql-sum-block--handoff { border-color: rgba(255,225,77,0.4); background: rgba(255,225,77,0.05); }
.ql-sum-block__h { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-faint); margin-bottom: 7px; }
.ql-kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); }
.ql-kv dt { color: var(--ink-faint); font-size: 0.82rem; }
.ql-kv dd { margin: 0; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.ql-kv-line { display: flex; justify-content: space-between; gap: var(--space-3); }
.ql-kv-line span { color: var(--ink-faint); }
.ql-sub { font-size: 0.78rem; color: var(--ink-faint); margin: 8px 0 3px; }
.ql-list { margin: 0; padding-left: 1.2em; color: var(--ink-soft); display: flex; flex-direction: column; gap: 2px; }
.ql-list--miss { color: var(--ink-faint); }
.ql-note { margin-top: 7px; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
@keyframes ql-flash-in { 0% { box-shadow: 0 0 0 0 rgba(2,255,149,0.55); background: rgba(2,255,149,0.14); } 60% { box-shadow: 0 0 0 5px rgba(2,255,149,0); } 100% { box-shadow: 0 0 0 0 rgba(2,255,149,0); background: var(--paper-2); } }
.ql-flash { animation: ql-flash-in 2s ease-out forwards; }
@media (prefers-reduced-motion: reduce) { .ql-flash { animation: none; } }
.dc-orig{white-space:pre-line;margin:0}

/* ─── Export Markdown modale (.lx-*) ─────────────────────────────── */
.lx-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; }
.lx-modal { background: var(--panel, #14161c); border: 1px solid var(--line-2, #2a2f3a); border-radius: 12px; width: min(840px, 100%); max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lx-modal__head { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--line-2, #2a2f3a); }
.lx-modal__title { font-weight: 600; }
.lx-x { background: none; border: 0; color: var(--ink-faint, #99a); cursor: pointer; font-size: 1rem; }
.lx-text { flex: 1; min-height: 50vh; margin: 0; padding: 1rem; background: var(--bg, #0d0f14); color: var(--ink, #e6e6e6); border: 0; font-family: var(--font-mono, ui-monospace, monospace); font-size: .8rem; line-height: 1.5; resize: none; white-space: pre; }
.lx-actions { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--line-2, #2a2f3a); }
.lx-msg { color: var(--ok, #02ff95); font-size: .8rem; }

/* --- UI catalogo unificata: cella foto+nome, placeholder, sezioni di gruppo --- */
.cat-cell{display:flex;align-items:center;gap:10px;min-width:0}
.cat-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--panel);border:1px solid var(--line)}
.cat-thumb img{width:100%;height:100%;object-fit:contain}
.cat-thumb--empty{font-size:.7rem;font-weight:700;color:var(--ink-faint)}
.cat-cell__name{display:flex;flex-direction:column;min-width:0;text-decoration:none;color:inherit}
.cat-cell__title{font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.cat-cell__code{font-size:.72rem;color:var(--ink-soft)}
.reg-table tr.reg-section td{background:var(--panel);font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);padding:9px 12px}

/* --- catalog-manage: tabella full-width (come hardware) + modal aggiungi articolo --- */
.reg-table[data-cm]{width:100%}
.cm-modal{padding:0;border:1px solid var(--line-2,#2a2f3a);border-radius:12px;background:var(--panel,#14161c);color:var(--ink);width:min(520px,100%);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cm-modal::backdrop{background:rgba(0,0,0,.6)}
.cm-modal__head{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-2,#2a2f3a)}
.cm-modal__head h2{margin:0;font-size:1rem}
.cm-modal__body{padding:1.1rem;display:flex;flex-direction:column;gap:.85rem}
.cm-field{display:flex;flex-direction:column;gap:.3rem;font-size:.78rem;color:var(--ink-soft)}
.cm-field>.input{width:100%}
.cm-modal__actions{display:flex;justify-content:flex-end;gap:.5rem;padding:.9rem 1.1rem;border-top:1px solid var(--line-2,#2a2f3a)}

/* --- Azioni di riga catalogo (gruppo coeso di icon-button con label) --- */
.row-acts{display:inline-flex;align-items:center;gap:4px}
.row-acts form{margin:0;display:inline-flex}
.row-act{display:inline-flex;align-items:center;gap:5px;padding:.34rem .55rem;font-size:.76rem;font-weight:500;border-radius:var(--radius);border:1px solid transparent;color:var(--ink-soft);background:transparent;cursor:pointer;text-decoration:none;line-height:1;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)}
.row-act svg{width:14px;height:14px;flex:0 0 auto}
.row-act:hover{background:var(--hover);color:var(--ink);border-color:var(--ink-hair)}
.row-act:active{transform:translateY(1px)}
.row-act--danger{color:var(--red-dk)}
.row-act--danger:hover{background:var(--c-red);color:#fff;border-color:transparent}

/* --- Tabella: dialoghetto data quando si mette un deal In sospeso --- */
.hold-dlg { background:#12151c; color:#e6e9ef; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1.1rem 1.2rem; max-width:min(92vw,360px); }
.hold-dlg::backdrop { background:rgba(0,0,0,.55); }
.hold-dlg h3 { margin:0 0 .35rem; font-size:1rem; }
.hold-dlg p { margin:0 0 .8rem; font-size:.82rem; }
.hold-dlg menu { display:flex; gap:.5rem; justify-content:flex-end; margin:.9rem 0 0; padding:0; }