/* =======================================================================
   Cammino Diritto - la pagina dell'assistenza (26/10/2026)

   Ogni richiesta e' una conversazione: a sinistra l'elenco, al centro i
   messaggi in ordine di tempo, a destra (solo per la redazione) chi
   scrive. Sul telefono si vede una colonna alla volta: l'elenco, oppure
   la conversazione aperta con il ritorno all'elenco.

   Tutto e' chiuso dentro .as: fuori di qui non cambia niente. I colori e
   i caratteri sono quelli della rivista (broadsheet.css), con un ripiego
   per ciascuno.
   ======================================================================= */

.page-content.as{ padding-top:38px; padding-bottom:64px; }
.as{
  --as-ink:var(--ink,#141412);
  --as-ink2:var(--ink2,#54534E);
  --as-ink3:#8A8880;
  --as-fil:var(--fil,#C8C6BE);
  --as-fil2:#E4E2DA;
  --as-carta:var(--bianco,#FBFAF7);
  --as-rosso:var(--rosso,#9B1B1B);
  --as-rosso2:#F6E9E7;
  --as-ambra:#8A5A00;
  --as-ambra2:#FBF1DC;
  --as-verde:#2F6B3A;
  --as-staff:#F3F1EA;
  --as-stretto:var(--stretto,'Archivo Narrow',Arial,sans-serif);
  --as-serif:var(--serif,'Newsreader',Georgia,serif);
  font-family:var(--as-serif);
  color:var(--as-ink);
  font-size:16px;
  line-height:1.5;
}
.as *, .as *::before, .as *::after{ box-sizing:border-box; }
.as a{ color:var(--as-rosso); }
.as [hidden]{ display:none !important; }
.as .as-sr{ position:absolute; left:-9999px; }
.as .as-mini{ font-family:var(--as-stretto); font-size:12.5px; color:var(--as-ink3); }

/* ---- testata della pagina ------------------------------------------- */
.as-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap;
  border-bottom:3px solid var(--as-ink); padding-bottom:14px;
}
.as-kick{
  font-family:var(--as-stretto); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--as-rosso);
}
.as h1{
  font-family:'Playfair Display',Georgia,serif; font-weight:400;
  font-size:34px; line-height:1.15; margin:6px 0 4px;
}
.as-sub{ color:var(--as-ink2); margin:0; max-width:46em; font-size:16px; }
.as-nuova{ text-align:right; }
.as-conta{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); margin-top:6px; }

/* ---- pulsanti -------------------------------------------------------- */
.as-btn{
  font-family:var(--as-stretto); font-size:12.5px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--as-ink); background:var(--as-ink); color:var(--as-carta);
  padding:11px 20px; cursor:pointer; border-radius:0; line-height:1.2;
  display:inline-flex; gap:8px; align-items:center;
}
.as-btn:hover{ opacity:.88; }
.as-btn--red{ background:var(--as-rosso); border-color:var(--as-rosso); }
.as-btn--ghost{ background:transparent; color:var(--as-ink); }
.as-btn--small{ padding:7px 12px; font-size:11.5px; }
.as-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.as button:focus-visible, .as a:focus-visible, .as select:focus-visible, .as input:focus-visible{
  outline:2px solid var(--as-rosso); outline-offset:2px;
}

/* ---- avvisi ---------------------------------------------------------- */
.as-avviso{
  margin:14px 0 0; padding:10px 14px; font-family:var(--as-stretto); font-size:14.5px;
  background:#E8F1E6; color:var(--as-verde); border-left:3px solid var(--as-verde);
}
.as-avviso--err{ background:var(--as-rosso2); color:var(--as-rosso); border-left-color:var(--as-rosso); }

/* ---- barra del banco (redazione) ------------------------------------- */
.as-bar{
  display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--as-fil);
}
.as-tabs{ display:flex; gap:4px 18px; flex-wrap:wrap; }
.as-tab{
  font-family:var(--as-stretto); font-size:14px; color:var(--as-ink2) !important;
  border-bottom:2px solid transparent; padding:6px 2px; text-decoration:none !important;
}
.as-tab[aria-current]{ color:var(--as-ink) !important; border-bottom-color:var(--as-rosso); font-weight:600; }
.as-n{
  display:inline-block; min-width:20px; padding:0 6px; margin-left:5px; border-radius:10px;
  background:var(--as-fil2); font-size:12px; text-align:center; color:var(--as-ink);
}
.as-tab--urg .as-n{ background:var(--as-rosso); color:#fff; }
.as-cerca{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.as-cerca input, .as-cerca select{
  border:1px solid var(--as-fil); background:#fff; padding:7px 10px;
  font-family:var(--as-stretto); font-size:14px; height:auto; border-radius:0;
}
.as-cerca input{ width:300px; max-width:100%; }
.as-risultati{ font-family:var(--as-stretto); font-size:14px; color:var(--as-ink2); margin:10px 0 0; }

/* ---- impianto a colonne ---------------------------------------------- */
.as-grid{
  display:grid; grid-template-columns:320px minmax(0,1fr);
  border-bottom:1px solid var(--as-fil); min-height:560px; margin-top:0;
}
.as-grid--staff{ grid-template-columns:330px minmax(0,1fr) 260px; }
.as-list{ border-right:1px solid var(--as-fil); overflow:auto; max-height:78vh; }
.as-thread{ display:flex; flex-direction:column; min-width:0; }
.as-vuoto{ padding:28px 18px; color:var(--as-ink2); font-style:italic; margin:0; }
.as-vuoto--thread{ padding:48px 28px; }

/* ---- elenco ---------------------------------------------------------- */
.as-row{
  display:block; text-decoration:none !important; color:var(--as-ink) !important;
  border-bottom:1px solid var(--as-fil2); padding:14px 16px 14px 18px;
}
.as-row:hover{ background:#F4F3EE; }
.as-row[aria-current]{ background:#fff; box-shadow:inset 3px 0 0 var(--as-rosso); }
.as-r1{ display:flex; justify-content:space-between; gap:8px; font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); }
.as-r2{ display:block; font-weight:500; margin:3px 0 2px; line-height:1.3; }
.as-r3{ display:block; font-size:14.5px; color:var(--as-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.as-r4{ display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
.as-tardi{ color:var(--as-rosso); font-weight:700; }

.as-pill{
  font-family:var(--as-stretto); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  padding:2px 8px; white-space:nowrap; display:inline-block;
}
.as-p-noi{ background:var(--as-rosso2); color:var(--as-rosso); }
.as-p-lav{ background:var(--as-fil2); color:var(--as-ink2); }
.as-p-ute{ background:var(--as-ambra2); color:var(--as-ambra); }
.as-p-chi{ background:var(--as-fil2); color:var(--as-ink2); }
.as-p-rep{ border:1px solid var(--as-fil); color:var(--as-ink2); font-weight:400; }

/* ---- testata del ticket ---------------------------------------------- */
.as-th{ padding:18px 24px 14px; border-bottom:1px solid var(--as-fil2); background:#fff; }
.as-meta{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); display:flex; gap:4px 14px; flex-wrap:wrap; }
.as-th h2{ font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:24px; margin:4px 0 8px; line-height:1.2; }
.as-back{ display:none; font-family:var(--as-stretto); font-size:13.5px; padding:0 0 8px; text-decoration:none; }

.as-stato{
  padding:10px 24px; font-family:var(--as-stretto); font-size:14.5px;
  display:flex; gap:10px; align-items:center; flex-wrap:wrap; border-bottom:1px solid var(--as-fil2);
}
.as-stato > span{ flex:1 1 280px; }
.as-stato form{ margin:0; }
.as-stato--noi{ background:var(--as-rosso2); }
.as-stato--ute{ background:var(--as-ambra2); }
.as-stato--chi{ background:var(--as-fil2); }

/* ---- conversazione --------------------------------------------------- */
.as-msgs{ flex:1; overflow:auto; padding:22px 24px; max-height:62vh; background:var(--as-carta); }
.as-giorno{
  display:flex; align-items:center; gap:12px; margin:8px 0 14px;
  font-family:var(--as-stretto); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--as-ink3);
}
.as-giorno::before, .as-giorno::after{ content:""; flex:1; height:1px; background:var(--as-fil2); }
.as-msg{ display:grid; grid-template-columns:38px minmax(0,1fr); gap:12px; margin:0 0 18px; }
.as-av{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--as-stretto); font-weight:700; font-size:14px; background:var(--as-fil2);
}
.as-msg--s .as-av{ background:var(--as-ink); color:var(--as-carta); }
.as-bubble{ background:#fff; border:1px solid var(--as-fil2); padding:12px 16px; max-width:46em; min-width:0; }
.as-msg--s .as-bubble{ background:var(--as-staff); }
.as-who{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); margin-bottom:4px; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline; }
.as-who b{ color:var(--as-ink); font-size:14px; }
.as-testo{ overflow-wrap:anywhere; font-size:16px; }
.as-testo p{ margin:0 0 8px; }
.as-testo--muto{ font-family:var(--as-stretto); font-size:14px; color:var(--as-ink3); }
.as-files{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:10px; }
.as-file{
  font-family:var(--as-stretto); font-size:13px; display:inline-flex; gap:6px; align-items:center;
  border:1px solid var(--as-fil); background:#fff; padding:5px 10px; text-decoration:none !important; color:var(--as-ink) !important;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.as-file:hover{ border-color:var(--as-ink); }
.as-vecchi{ border:1px dashed var(--as-fil); padding:10px 14px; margin:4px 0 18px; }
.as-vecchi__t{ font-family:var(--as-stretto); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--as-ink3); }
.as-vecchi__chi{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); }
.as-sistema{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink3); text-align:center; margin:0 0 10px; }

/* ---- compositore ----------------------------------------------------- */
.as-comp{ border-top:1px solid var(--as-fil); background:#fff; padding:14px 24px 10px; margin:0; }
.as-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.as-chip{
  font-family:var(--as-stretto); font-size:12.5px; border:1px solid var(--as-fil);
  background:var(--as-carta); padding:4px 10px; cursor:pointer; border-radius:14px; color:var(--as-ink);
}
.as-chip:hover{ border-color:var(--as-ink); }
.as-comp textarea{
  width:100%; min-height:110px; border:1px solid var(--as-fil); padding:10px 12px; resize:vertical;
  background:#fff; font-family:var(--as-serif); font-size:16px; line-height:1.45; border-radius:0;
}
.as-comp textarea:focus{ outline:2px solid var(--as-ink); outline-offset:-1px; }
.as-piede{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:10px; flex-wrap:wrap; }
.as-hint{ font-family:var(--as-stretto); font-size:13px; color:var(--as-ink2); }
.as-invii{ display:flex; gap:8px; flex-wrap:wrap; }
.as-allega{ background:#fff; padding:0 24px 14px; }
.as-allega iframe{ width:100%; height:66px; border:0; display:block; }
.as-chiuso{ padding:16px 24px; border-top:1px solid var(--as-fil); background:#fff; font-family:var(--as-stretto); font-size:14.5px; }
.as-chiuso form{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0; }

/* ---- scheda di chi scrive (redazione) -------------------------------- */
.as-side{ border-left:1px solid var(--as-fil); padding:18px; font-family:var(--as-stretto); font-size:14px; background:#F7F6F1; }
.as-side h3{ font-family:var(--as-stretto); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--as-rosso); margin:0 0 8px; }
.as-side dl{ margin:0 0 12px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 10px; }
.as-side dt{ color:var(--as-ink3); font-weight:400; }
.as-side dd{ margin:0; overflow-wrap:anywhere; }
.as-side p{ margin:0 0 18px; }
.as-side ul{ list-style:none; margin:0 0 18px; padding:0; }
.as-side li{ padding:6px 0; border-bottom:1px solid var(--as-fil2); }
.as-side select{ width:100%; padding:6px; border:1px solid var(--as-fil); background:#fff; font-family:var(--as-stretto); }
.as-side form{ margin:0; }
.as-pericolo{ margin-top:24px; padding-top:12px; border-top:1px solid var(--as-fil); display:grid; gap:10px; }
.as-pericolo button{ background:none; border:0; color:var(--as-rosso); cursor:pointer; padding:0; font-family:var(--as-stretto); font-size:13.5px; text-decoration:underline; }

/* ---- nuova richiesta -------------------------------------------------- */
.as-dlg{
  border:0; padding:0; max-width:720px; width:calc(100% - 32px); max-height:calc(100vh - 32px);
  box-shadow:0 18px 50px rgba(20,20,18,.28); background:var(--bianco,#FBFAF7); color:var(--ink,#141412);
  font-family:var(--serif,'Newsreader',Georgia,serif); font-size:16px; line-height:1.5;
}
.as-dlg::backdrop{ background:rgba(20,20,18,.45); }
.as-dlg *{ box-sizing:border-box; }
.as-dlg__f{ padding:26px 28px; }
.as-dlg h2{ font-family:'Playfair Display',Georgia,serif; font-weight:400; font-size:28px; margin:4px 0; }
.as-dlg .as-kick{ font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--rosso,#9B1B1B); }
.as-passi{ display:flex; gap:8px; font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:12.5px; color:#8A8880; margin:12px 0 18px; }
.as-passi span{ flex:1; border-top:3px solid #E4E2DA; padding-top:6px; }
.as-passi span.as-on{ border-color:var(--rosso,#9B1B1B); color:var(--ink,#141412); }
.as-cats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.as-cat{ text-align:left; border:1px solid #C8C6BE; background:#fff; padding:14px; cursor:pointer; color:var(--ink,#141412); }
.as-cat:hover, .as-cat[aria-pressed=true]{ border-color:var(--ink,#141412); box-shadow:inset 0 0 0 1px var(--ink,#141412); }
.as-cat b{ display:block; font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:15px; }
.as-cat small{ color:#54534E; font-size:14.5px; line-height:1.35; display:block; margin-top:3px; font-family:var(--serif,'Newsreader',Georgia,serif); }
.as-forse{ background:#FBF1DC; padding:12px 14px; font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:14px; margin:0 0 16px; }
.as-forse ul{ margin:6px 0; padding-left:18px; }
.as-campo{ margin:0 0 14px; }
.as-campo label{ display:block; font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:13.5px; font-weight:600; margin-bottom:4px; }
.as-aiuto{ font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:13px; color:#54534E; margin:0 0 6px; }
.as-campo input, .as-campo textarea{ width:100%; border:1px solid #C8C6BE; background:#fff; padding:9px 11px; font-size:16px; border-radius:0; font-family:inherit; }
.as-campo textarea{ min-height:140px; resize:vertical; }
.as-conta2{ font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:12.5px; color:#8A8880; text-align:right; }
.as-dlg__piede{ display:flex; justify-content:space-between; gap:10px; margin-top:18px; }
.as-dlg .as-btn{ font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--ink,#141412); background:var(--ink,#141412); color:#FBFAF7; padding:11px 20px; cursor:pointer; }
.as-dlg .as-btn--red{ background:var(--rosso,#9B1B1B); border-color:var(--rosso,#9B1B1B); }
.as-dlg .as-btn--ghost{ background:transparent; color:var(--ink,#141412); }
.as-dlg .as-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.as-dlg .as-mini{ font-family:var(--stretto,'Archivo Narrow',Arial,sans-serif); font-size:12.5px; color:#8A8880; font-weight:400; }

/* ---- schermi stretti ------------------------------------------------- */
@media (max-width:1199px){
  .as-grid--staff{ grid-template-columns:300px minmax(0,1fr); }
  .as-grid--staff .as-side{ grid-column:1 / -1; border-left:0; border-top:1px solid var(--as-fil); }
}
@media (max-width:820px){
  .as h1{ font-size:28px; }
  .as-nuova{ text-align:left; width:100%; }
  .as-grid, .as-grid--staff{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .as-list{ border-right:0; max-height:none; }
  /* una colonna alla volta: l'elenco, o la conversazione scelta */
  .as-grid.as-aperto .as-list{ display:none; }
  .as-grid:not(.as-aperto) .as-thread,
  .as-grid:not(.as-aperto) .as-side{ display:none; }
  .as-back{ display:inline-block; }
  .as-msgs{ max-height:none; padding:16px; }
  .as-th, .as-comp, .as-stato, .as-chiuso, .as-allega{ padding-left:16px; padding-right:16px; }
  .as-cerca{ margin-left:0; width:100%; }
  .as-cerca input{ flex:1; width:auto; }
  .as-msg{ grid-template-columns:30px minmax(0,1fr); gap:8px; }
  .as-av{ width:30px; height:30px; font-size:12px; }
  .as-cats{ grid-template-columns:1fr; }
  .as-dlg__f{ padding:20px 18px; }
  .as-invii, .as-invii .as-btn{ width:100%; justify-content:center; }
}