/* Visual language inherited from BusinessCaseModelingPoc: stone deal room. */

/* Una custom property e' un testo, e un testo non si interpola: mettendo la
 * transizione su `grid-template-columns`, Chrome non sapeva animare un valore
 * che contiene `minmax()` e **congelava quello di partenza** — il pannello
 * restava largo mentre la variabile diceva zero. Dichiarandola una lunghezza,
 * e' lei ad animarsi, e la griglia la segue. */
@property --sidebar-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 17rem;
}

@font-face {
  font-family: "Commissioner Flare";
  src: url("/static/fonts/CommissionerFlare-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  /* Palette allineata a Opus (Sidea premium): navy deep, neutri caldi. */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-sunken: #f5f3f0;
  --surface-hover: #f0ede8;
  --line: #e6e2dc;
  --line-strong: #d4cfc9;
  --ink: #1a2332;
  --ink-muted: #6b7a8a;
  --accent: #1e3a5f;
  --accent-strong: #152238;
  --accent-wash: #f0f3f7;
  --danger: #c53030;
  --gap: #b8860b;
  --gap-wash: #fdf8ef;
  --ok: #2d8a6e;
  --workroom: #faf8f5;
  --workroom-raised: #ffffff;
  --workroom-text: #1a2332;
  --workroom-muted: #6b7a8a;
  --paper-shadow: 0 14px 34px rgba(21, 34, 56, 0.08);
  --font-display: "Fahkwang", system-ui, sans-serif;
  --font-doc: "Inter", system-ui, sans-serif;
  --radius-sm: 7px;
  --radius-md: 14px;
  --split: 42%;
  --chrome-height: 0px;
  --panel: 17rem;
}

html,
body {
  height: 100%;
  background: var(--workroom);
}

body {
  display: block;
  min-height: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.925rem;
  line-height: 1.5;
}

::selection {
  color: var(--surface);
  background: var(--accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.appbar {
  position: static;
  min-height: var(--chrome-height);
  padding: 0 22px;
  color: var(--workroom-text);
  background: var(--workroom);
  border: 0;
  box-shadow: inset 0 -1px oklch(0.79 0.018 72);
}

.brand__mark {
  width: 38px;
  height: 38px;
  color: var(--accent-strong);
  background: transparent;
  border: 1px solid oklch(0.70 0.025 72);
  border-radius: 10px;
}

.brand__mark svg {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand h1 {
  color: var(--workroom-text);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.018em;
}

.brand p {
  color: var(--workroom-muted);
  font-size: 0.68rem;
  letter-spacing: 0.025em;
}

.runtime { color: var(--workroom-muted); }
.appbar .button--quiet { background: transparent; border-color: var(--line-strong); }
.appbar .button--quiet:hover { color: var(--ink); background: var(--workroom-raised); }

.workspace {
  display: grid;
  /* La derivazione sta qui e non in `:root`: una custom property si eredita
     già risolta, quindi `--sidebar-width: var(--panel)` scritta sulla radice
     userebbe il `--panel` della radice — non quello che il trascinamento
     scrive inline su questo elemento. Il pannello si allargava nei numeri e
     non nella pagina. */
  --sidebar-width: var(--panel);
  height: 100%;
  /* Conversazione e dossier hanno un minimo, e non e' pedanteria: erano
   * `minmax(0, …)`, cioe' comprimibili fino a sparire. Finche' le colonne erano
   * due il limite dello splitter bastava; con il pannello davanti, trascinando
   * la conversazione al massimo il dossier scendeva a centottanta pixel e
   * andava a capo su ogni parola.
   *
   * `min(Xrem, 100%)` perche' un minimo piu' largo del contenitore
   * sfonderebbe la pagina su uno schermo stretto. Il massimo della
   * conversazione resta `--split`, ma cede quando serve spazio al minimo
   * dell'altra: e' cio' che `minmax` significa. */
  grid-template-columns:
    var(--sidebar-width)
    9px
    minmax(min(20rem, 100%), calc(var(--work) * var(--split)))
    var(--gutter-right)
    var(--dossier-track);

  /* La zona di lavoro e' cio' che resta dopo il pannello, e `--split` ne e' una
   * frazione — un numero, non una percentuale della pagina. Misurata sulla
   * pagina, aprire il pannello toglieva spazio al dossier invece che alla
   * conversazione: la proporzione fra le due cambiava senza che nessuno avesse
   * mosso la maniglia. */
  --work: calc(100% - var(--sidebar-width) - 9px - var(--gutter-right));
  --gutter-right: 9px;
  --dossier-track: minmax(min(26rem, 100%), 1fr);
  width: 100%;
  max-width: none;
  min-height: 0;
  height: 100%;
  margin: 0;
  padding: 0 12px 12px 0;
  overflow: hidden;
  border: 0;
  background: var(--workroom);
}

.conversation {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-rows: auto minmax(120px, 1fr) auto;
  /* La colonna va dichiarata, e va dichiarata `minmax(0, 1fr)`.
   *
   * Senza, la griglia ne crea una implicita `auto`, che si dimensiona sul
   * contenuto: barra dell'attività, elenco dei messaggi e composer restavano
   * tutti larghi quanto il più largo di loro — misurati 442px dentro una
   * colonna di 368 — e sfondavano nel business case, che si ritrovava le
   * proprie righe coperte a sinistra.
   *
   * `min-width: 0` qui sotto governa quanto è larga *questa* colonna nella
   * griglia esterna: è una cosa diversa, e infatti non bastava. Lo zero che
   * serviva era quello del minimo interno. */
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-height: none;
  height: 100%;
  color: var(--workroom-text);
  background: var(--workroom);
  border: 0;
}

.status,
.revision,
.narrative-status {
  border: 0;
  border-radius: 7px;
  background: var(--workroom-raised);
}

.tracebar {
  min-height: 50px;
  padding: 7px clamp(12px, 2.4vw, 32px);
  color: var(--workroom-text);
  background: transparent;
  border-color: var(--line-strong);
}

/* Un pannello chiuso lascia una maniglia sospesa sull'angolo, e quell'angolo è
 * già occupato: la barra dell'attività si allarga fino al bordo, e la freccia
 * per riaprire il business case finiva addosso a «Esci» — attaccata al punto
 * da sembrarne un pezzo. Vale su tutti e due i lati, per lo stesso motivo.
 *
 * La barra si scosta quanto basta a lasciarla passare. La maniglia resta
 * `fixed` dov'è: è ancorata allo schermo di proposito, perché deve stare dove
 * il pannello ricomparirà, non dove finisce il testo. */
body:has(.workspace[data-dossier="hidden"]) .tracebar {
  padding-inline-end: 4.6rem;
}

body:has(.workspace[data-sidebar="hidden"]) .tracebar {
  padding-inline-start: 3.6rem;
}

.trace {
  background: var(--workroom-raised);
  border-color: var(--line-strong);
}

.trace__head h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: -0.025em;
}

.messages {
  min-width: 0;
  padding: 12px clamp(20px, 3vw, 42px) 28px;
  scrollbar-color: oklch(0.64 0.018 72) transparent;
}

.message {
  padding-block: 18px;
  border-color: var(--line-strong);
}

.message--user {
  margin-block: 10px;
  padding: 12px 14px;
  border: 0;
  border-radius: 10px;
  background: var(--workroom-raised);
}

.message__meta {
  color: var(--accent-strong);
  font-size: 0.7rem;
  letter-spacing: 0.015em;
}

.message--user .message__meta {
  color: var(--workroom-muted);
  justify-content: flex-start;
}

.message p {
  max-width: 72ch;
  color: var(--workroom-text);
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

/* Il cursore sta dove la scrittura è arrivata: sull'ultimo blocco, uno solo.
   Applicato a ogni `p` diventava una fila di quadratini lampeggianti, uno per
   riga — invisibile finché la risposta era un paragrafo unico, evidente da
   quando i cicli dell'Agente vengono separati come si deve. */
.message[data-streaming="true"] .message__body > :last-child::after {
  content: "";
  display: inline-block;
  width: 0.52em;
  height: 1em;
  margin-inline-start: 4px;
  vertical-align: -0.14em;
  background: var(--accent);
  animation: stream-caret 900ms steps(1, end) infinite;
}

@keyframes stream-caret { 50% { opacity: 0; } }

.composer {
  padding: 12px clamp(20px, 3vw, 42px) 22px;
  background: var(--workroom);
  border: 0;
  /* Un elemento di griglia si dimensiona sul proprio contenuto se non gli si
     dice altro, e `min-width: auto` non scende sotto quel minimo. Con tre
     allegati la fila di chip diventava la larghezza minima del composer, il
     composer quella della conversazione, e la colonna cresceva fin sopra il
     dossier: i file coprivano il business case. Lo scorrimento orizzontale
     dichiarato su `.attachments` non entrava mai in gioco, perché il
     contenitore si allargava invece di stringere. */
  min-width: 0;
}

.composer__field {
  overflow: hidden;
  min-width: 0;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: 0 10px 28px oklch(0.24 0.012 65 / 0.13);
}

.composer__field:focus-within {
  box-shadow: 0 10px 28px oklch(0.24 0.012 65 / 0.15), 0 0 0 2px oklch(0.58 0.095 145);
}

.composer textarea {
  min-height: 62px;
  max-height: 210px;
  padding: 15px 16px 10px;
  resize: none;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.composer textarea:focus { border: 0; box-shadow: none; }

/* Va a capo quando manca lo spazio, non quando la *finestra* è stretta.
 *
 * Il `flex-wrap` stava nella media query a 620px, che guarda la larghezza
 * della pagina: trascinando il divisore del business case verso sinistra la
 * finestra resta larga, la colonna della chat no, e la riga dei comandi —
 * «Invio per inviare · Alt+Invio per andare a capo» più due pulsanti —
 * continuava a pretendere la sua larghezza intera, sfondando sotto il dossier.
 * Una colonna può stringersi senza che lo faccia lo schermo. */
.composer__footer {
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 0;
  padding: 2px 9px 9px;
}

.composer__footer small {
  margin-inline-start: auto;
  min-width: 0;
  color: var(--ink-muted);
}

.composer__footer .button { min-height: 38px; border-radius: 8px; }
.composer__footer .button:last-child { min-width: 78px; }

.attachments {
  display: flex;
  gap: 8px;
  margin: 0 0 9px;
  padding: 0;
  overflow-x: auto;
  /* Perché `overflow-x` scorra davvero e non allarghi il genitore. */
  min-width: 0;
  max-width: 100%;
  list-style: none;
}

.attachments:empty { display: none; }

.attachment {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  max-width: 270px;
  padding: 8px 9px 8px 11px;
  color: var(--ink);
  background: var(--workroom-raised);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

.attachment__detail { min-width: 0; }
.attachment strong,
.attachment small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment strong { font-size: 0.72rem; }
.attachment small { color: var(--ink-muted); font-size: 0.64rem; }
.attachment[data-state="ready"] { border-color: var(--accent); }
.attachment[data-state="error"] { border-color: var(--danger); }
.attachment[data-state="error"] small { color: var(--danger); }

.attachment__remove {
  min-height: 30px;
  padding: 4px 7px;
  color: var(--ink-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.64rem;
}

.attachment__remove:hover { color: var(--ink); background: var(--surface); }

.dropzone {
  position: absolute;
  z-index: 20;
  inset: 14px;
  display: grid;
  place-content: center;
  gap: 5px;
  pointer-events: none;
  color: white;
  text-align: center;
  background: oklch(0.35 0.070 145 / 0.96);
  border: 1px solid oklch(0.72 0.08 145);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dropzone span { font-size: 0.75rem; opacity: 0.8; }
.conversation[data-dragging="true"] .dropzone { opacity: 1; }

.splitter {
  position: relative;
  width: 1px;
  height: 100%;
  justify-self: center;
  background: oklch(0.72 0.018 72);
  cursor: col-resize;
  touch-action: none;
  z-index: 10;
}

.splitter::before { content: ""; position: absolute; inset: 0 -5px; }
.splitter::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 26px;
  border-radius: 999px;
  background: oklch(0.58 0.025 72);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

.splitter:hover,
.splitter:focus-visible,
.splitter[data-dragging="true"] { background: var(--accent); }
.splitter:hover::after,
.splitter:focus-visible::after,
.splitter[data-dragging="true"]::after { opacity: 1; }
body[data-resizing="true"] { cursor: col-resize; user-select: none; }

.case-sheet {
  min-width: 0;
  height: calc(100% - 12px);
  margin-top: 12px;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  border-radius: 15px;
  box-shadow: 0 1px 0 oklch(1 0 0 / 0.08);
}

.case-sheet__masthead,
.case-section,
.case-sheet__footer {
  padding-inline: clamp(24px, 4vw, 64px);
}

.case-sheet__masthead { padding-block: 34px 28px; }
.case-sheet__masthead h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  letter-spacing: -0.035em;
}

.case-section { padding-block: 32px 38px; }
.case-section__heading h3 { font-size: 0.82rem; }
.empty-state { background: var(--surface); border-color: var(--line-strong); }
.questions { border: 0; border-radius: 10px; }
.kpi__value { color: var(--accent-strong); }
.narrative blockquote { background: var(--accent-wash); border-color: var(--accent); }

/* 1100 e non 960: sotto quella soglia i minimi di pannello, conversazione
 * e dossier — 17 + 20 + 26rem, piu' le maniglie — non ci starebbero, e fra
 * le due soglie le colonne sfonderebbero la pagina invece di impilarsi. */
@media (max-width: 1100px) {
  body {
    display: block;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .appbar {
    position: sticky;
    top: 0;
    min-height: 66px;
    padding: 8px 14px;
  }

  .workspace {
    display: block;
    height: auto;
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .conversation {
    min-height: calc(100dvh - 66px);
    height: auto;
  }

  .messages { min-height: 280px; max-height: 48dvh; }
  .splitter { display: none; }

  .case-sheet {
    width: 100%;
    height: auto;
    margin: 0;
    overflow: visible;
    border-radius: 0;
  }
}

@media (max-width: 620px) {
  .brand__mark { display: none; }
  .brand p { display: none; }
  .appbar { gap: 8px; }
  .appbar__actions { gap: 7px; }
  .runtime { position: static; }
  .activity,
  .messages { padding-inline: 16px; }
  .composer { padding: 10px 12px 16px; }
  /* `flex-wrap` ora è nella regola base: su schermo stretto resta da decidere
     solo dove finisce il testo quando va a capo — sotto i pulsanti, a tutta
     larghezza, invece che stretto accanto a loro. */
  .composer__footer small { order: 3; width: 100%; margin: 2px 0 0; }
  .case-sheet__masthead,
  .case-section,
  .case-sheet__footer { padding-inline: 18px; }
  .case-sheet__masthead { flex-wrap: wrap; }
  .questions__actions { justify-content: stretch; }
  .questions__actions .button { flex: 1 1 100%; white-space: normal; }
  .attachment { max-width: 230px; }
  .table-wrap { max-width: calc(100vw - 36px); }
}

@media (prefers-reduced-motion: reduce) {
  .message[data-streaming="true"] .message__body > :last-child::after {
    animation: none;
  }
}

@media print {
  body { display: block; overflow: visible; background: white; }
  .case-sheet { height: auto; margin: 0; overflow: visible; box-shadow: none; }
  .splitter { display: none; }
}


/* --- Sidebar: lo storico delle conversazioni del cliente ------------------
 *
 * Sta a sinistra di tutto perché risponde alla prima domanda della giornata —
 * «dove eravamo rimasti» — che viene prima della conversazione e prima del
 * dossier. È una colonna della griglia, non un pannello sovrapposto: la
 * workroom deve restare leggibile con tutte e tre le cose insieme.
 */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 0;
  padding: 1rem 0.85rem 1.25rem;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--workroom-raised);
}

/* Le colonne sono assegnate a mano, e non è pedanteria.
 *
 * Un figlio con `display: none` esce dalla griglia, e i successivi scalano di
 * una colonna: nascondendo la sidebar, la conversazione finiva nella colonna da
 * zero pixel, lo splitter in quella della conversazione e il dossier nei nove
 * pixel dello splitter — mezza pagina vuota. Con la colonna dichiarata, ognuno
 * resta dov'è qualunque cosa accada ai fratelli. */
.sidebar {
  grid-column: 1;
}

.conversation {
  grid-column: 3;
}

.splitter {
  grid-column: 4;
}

/* La maniglia del pannello ha la sua colonna: senza, cade in quella dell'altra
   maniglia, due elementi si contendono la stessa cella e la griglia ne spinge
   uno in una seconda riga — mezza pagina sotto l'altra. */
.splitter--sidebar {
  grid-column: 2;
}

.case-sheet {
  grid-column: 5;
}

/* Chiuso, il pannello non sparisce: si stringe a zero e scorre via.
 * Con `display: none` la colonna resterebbe nella griglia e l'apertura sarebbe
 * uno scatto; cosi' invece la larghezza e' animabile e il movimento racconta
 * dove il pannello e' andato. */
/* Chiuso vince sulla larghezza scelta, e per questo sono due variabili.
 *
 * Il trascinamento scrive `--panel` **inline** sull'elemento; con una variabile
 * sola, lo stile inline batteva la regola del foglio e il pannello continuava a
 * occupare la sua colonna anche da chiuso: lo stato cambiava, la pagina no. */
.workspace[data-sidebar="hidden"] {
  --sidebar-width: 0px;
}

.workspace[data-sidebar="hidden"] .sidebar {
  padding-right: 0;
  padding-left: 0;
  border-right-color: transparent;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-0.75rem);
}

.workspace[data-sidebar="hidden"] .splitter--sidebar {
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .workspace {
    transition: --sidebar-width 260ms var(--ease-out);
  }

  .sidebar {
    transition:
      opacity 180ms var(--ease-out),
      transform 260ms var(--ease-out);
  }
}

.sidebar__head {
  display: grid;
  gap: 0.2rem;
}

.sidebar__client {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.2;
}

.sidebar__sector {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
}

.sidebar__new {
  width: 100%;
  margin-top: 0.35rem;
}

.sidebar__label {
  margin: 0.5rem 0 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar__empty {
  font-size: 0.8rem;
}

.chat-history {
  display: grid;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chat-history__link {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.chat-history__link:hover {
  background: var(--surface-hover);
}

.chat-history__link[aria-current="page"] {
  border-color: var(--line);
  background: var(--surface);
}

.chat-history__title {
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.chat-history__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-muted);
  font-size: 0.72rem;
}

.chat-history__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.chat-history__link[data-status="completed"] .chat-history__dot {
  background: var(--ok);
}

.chat-history__link[data-status="needs_decision"] .chat-history__dot,
.chat-history__link[data-status="needs_case_type"] .chat-history__dot,
.chat-history__link[data-status="ready_for_confirmation"] .chat-history__dot {
  background: var(--gap);
}

/* Sotto i 960px la workroom è già stretta: la sidebar diventa un cassetto che
 * si apre sopra la conversazione, invece di rubarle un terzo della larghezza. */
@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .conversation,
  .splitter,
  .case-sheet {
    grid-column: auto;
  }

  .sidebar {
    display: none;
  }

  .workspace[data-sidebar="visible"] .sidebar {
    display: flex;
    position: fixed;
    top: var(--chrome-height);
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    width: min(18rem, 82vw);
    box-shadow: var(--paper-shadow);
  }
}


/* --- Lo storico come elenco di scenari ------------------------------------
 *
 * Le conversazioni di un cliente sono la stessa iniziativa provata con ipotesi
 * diverse. La riga deve quindi dire due cose — quale ipotesi, e come è finita —
 * perché confrontarle è il motivo per cui sono più d'una.
 */

.chat-history__row {
  display: flex;
  align-items: start;
  gap: 0.15rem;
}

.chat-history__row .chat-history__link {
  flex: 1;
  min-width: 0;
}

.chat-history__action {
  padding: 0.3rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.78rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

/* Compaiono solo quando servono: una sidebar piena di icone sempre accese
   chiede attenzione a ogni riga, e le righe qui si scorrono. */
.chat-history__row:hover .chat-history__action,
.chat-history__action:focus-visible {
  opacity: 1;
}

.chat-history__action:hover {
  border-color: var(--line);
  color: var(--ink);
}

.chat-history__field {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  font: inherit;
  font-size: 0.84rem;
}

.chat-history__headline {
  overflow: hidden;
  color: var(--accent-strong);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}



/* --- Dialoghi ------------------------------------------------------------
 *
 * Stavano in `home.css`, che la workroom non carica: il dialogo di rinomina
 * si apriva senza un solo stile — largo quanto la pagina, con l'input
 * schiacciato e i bottoni attaccati. Vivono qui perche' questo foglio lo
 * caricano entrambe le pagine, ed e' l'unico posto in cui una regola vale
 * per tutte e due.
 */

.client-dialog {
  width: min(30rem, calc(100vw - 2rem));
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
}

.client-dialog::backdrop {
  background: oklch(0.24 0.012 65 / 0.42);
}

.client-dialog form {
  display: grid;
  gap: 0.4rem;
  padding: 1.4rem 1.5rem 1.25rem;
}

.client-dialog h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.2rem;
}

.client-dialog__hint {
  margin: 0 0 0.5rem;
  color: var(--ink-muted);
  font-size: 0.83rem;
}

.client-dialog label {
  margin-top: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.client-dialog input,
.client-dialog textarea {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: inherit;
  font: inherit;
  resize: vertical;
}

.client-dialog input:focus-visible,
.client-dialog textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent-wash);
}

.client-dialog__error {
  margin: 0.6rem 0 0;
  color: var(--danger);
  font-size: 0.83rem;
}

.client-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 1rem;
}



/* --- Il pannello e la sua maniglia ----------------------------------------
 *
 * La fascia in alto e' sparita: portava un titolo, un pallino e due bottoni
 * su tutta la larghezza dello schermo per dire cose che riguardano una colonna
 * sola. Quel che serviva vive ora dove serve — il pannello nel pannello, lo
 * stato del Runtime dentro la conversazione.
 */

.drawer-handle {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}

.drawer-handle:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* La maniglia esterna esiste solo quando il pannello e' chiuso: e' l'unico
   modo per riaprirlo, e sopra il pannello aperto sarebbe un doppione. */
.drawer-handle:not(.drawer-handle--inline) {
  position: fixed;
  top: 0.7rem;
  left: 0.7rem;
  z-index: var(--z-sticky);
  visibility: hidden;
  background: var(--workroom-raised);
  opacity: 0;
}

/* `:not(.drawer-handle--right)` perché i due pannelli hanno due stati, e
 * questa regola parla solo di quello di sinistra. Senza l'esclusione la
 * maniglia del business case compariva insieme a quella della sidebar: due
 * frecce in alto a destra, una per aprire un pannello che era già aperto,
 * accanto a quella per chiuderlo. */
body:has(.workspace[data-sidebar="hidden"])
  .drawer-handle:not(.drawer-handle--inline):not(.drawer-handle--right) {
  visibility: visible;
  opacity: 1;
}

.burger {
  display: grid;
  gap: 4px;
  width: 17px;
}

.burger i {
  height: 1.8px;
  border-radius: 2px;
  background: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .burger i {
    transition: transform 220ms var(--ease-out), opacity 160ms var(--ease-out);
  }
}

/* Aperto, il tratto centrale sparisce e gli altri due si incrociano: la
   maniglia dice da sola che cosa fara' il prossimo click. */
[aria-expanded="true"] .burger i:nth-child(1) {
  transform: translateY(5.8px) rotate(45deg);
}

[aria-expanded="true"] .burger i:nth-child(2) {
  opacity: 0;
}

[aria-expanded="true"] .burger i:nth-child(3) {
  transform: translateY(-5.8px) rotate(-45deg);
}

.sidebar__chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}

.sidebar .brand__mark {
  /* Piu' grande della maniglia che gli sta accanto: a 2.1rem il tracciato, la
     soglia e il punto di attraversamento diventavano tre macchie sovrapposte. */
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  color: var(--ink);
}

.sidebar .brand__mark svg {
  width: 100%;
  height: 100%;
}

.sidebar__client {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.2;
}

.sidebar__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 0.55rem 0 0;
}

.sidebar__label h2 {
  margin: 0;
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sidebar__pick,
.sidebar__quiet {
  padding: 0.15rem 0.3rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
}

.sidebar__pick:hover,
.sidebar__quiet:hover,
.sidebar__pick[aria-pressed="true"] {
  border-color: var(--line);
  color: var(--ink);
}

.sidebar__selection {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.78rem;
}

.button--danger {
  border-color: var(--danger);
  background: var(--danger);
  color: var(--surface);
}

.sidebar__foot {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
}

.sidebar__foot .sidebar__quiet {
  width: 100%;
  text-align: left;
}

/* La casella di selezione occupa spazio solo quando si sta selezionando. */
.chat-history__pick {
  flex: none;
  margin: 0.5rem 0 0;
  accent-color: var(--accent);
}

.chat-history:not([data-picking="true"]) .chat-history__pick {
  display: none;
}

.chat-history[data-picking="true"] .chat-history__action {
  display: none;
}

/* Il pallino del Runtime, dove si guarda mentre si aspetta una risposta. */
.tracebar .runtime {
  display: inline-grid;
  place-items: center;
  margin-left: 0.1rem;
}

.tracebar .runtime__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--line-strong);
}

.tracebar .runtime[data-state="online"] .runtime__dot {
  background: var(--ok);
}

.tracebar .runtime[data-state="offline"] .runtime__dot {
  background: var(--danger);
}

/* Il ritorno all'elenco vive nel marchio, dove la convenzione lo cerca.
 *
 * Era un bottone a piena larghezza sopra «Nuova chat»: due rettangoli uno
 * sull'altro, di cui uno naviga e l'altro agisce, e il primo con la stessa
 * voce del secondo — competeva con l'azione primaria senza esserne
 * all'altezza. Il marchio, intanto, occupava una riga senza fare niente:
 * adesso i due sono la stessa cosa.
 */

.sidebar__home {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: -0.35rem;
  padding: 0.25rem 0.5rem 0.25rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--ink);
  text-decoration: none;
}

.sidebar__home:hover,
.sidebar__home:focus-visible {
  border-color: var(--line);
  background: var(--surface);
}

.sidebar__home-label {
  font-size: 0.86rem;
  font-weight: 600;
}

/* La freccia compare solo quando serve: fermo, il blocco e' un marchio;
 * puntato, dichiara che porta indietro. E' un tracciato e non un carattere
 * perche' il subset del font non porta U+2190 e al suo posto compariva il
 * quadratino del glifo mancante. */
.sidebar__home-arrow {
  width: 0;
  height: 0.95rem;
  overflow: visible;
  color: var(--ink-muted);
  opacity: 0;
}

.sidebar__home:hover .sidebar__home-arrow,
.sidebar__home:focus-visible .sidebar__home-arrow {
  width: 0.95rem;
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sidebar__home-arrow {
    transition: width 160ms var(--ease-out), opacity 160ms var(--ease-out);
  }
}

.sidebar__head {
  margin-top: 0.35rem;
}


/* --- La testata del dossier si adatta alla colonna, non alla finestra ------
 *
 * Il masthead era un flex senza `wrap`, e le azioni `flex: 0 0 auto`: non
 * andavano a capo e non si stringevano. Il `wrap` esisteva solo sotto i 620px
 * di **viewport** — ma qui a stringersi e' la colonna. Con lo splitter tirato,
 * il dossier scendeva a poco piu' di quattrocento pixel su uno schermo da
 * millenovecento, la media query non scattava e i bottoni uscivano dal foglio.
 */

.case-sheet__masthead {
  flex-wrap: wrap;
}

/* Il titolo cede per primo: sotto le quattordici em porta le azioni a capo
   invece di schiacciarle fuori. */
.case-sheet__head > :first-child {
  flex: 1 1 14rem;
  min-width: 0;
}

.case-sheet__actions {
  flex: 0 1 auto;
  max-width: 100%;
}

/* «Presenter (mock non disponibile)» da solo e' piu' largo di una colonna
   stretta: andato a capo, il bottone deve poter spezzare la propria etichetta
   invece di sporgere. */
.case-sheet__actions .button {
  max-width: 100%;
  white-space: normal;
  text-align: center;
}


/* --- Il dossier misura se stesso -------------------------------------------
 *
 * Le sue righe hanno colonne con minimi in pixel: `.kpi` ne pretendeva 520 fra
 * nome, valore, descrizione e distanze. Finche' il dossier era mezza pagina non
 * si notava; ridotto al minimo ne offre meno di trecento, e la descrizione
 * usciva dal foglio tagliata a meta' parola.
 *
 * Una media query non serve: a stringersi e' la colonna, non la finestra. Il
 * foglio diventa il proprio contenitore di riferimento e le righe rispondono a
 * quanto e' largo lui.
 */

.case-sheet {
  container-type: inline-size;
  container-name: dossier;
}

@container dossier (max-width: 34rem) {
  /* Nome e valore restano affiancati — sono la coppia che si legge — e la
     descrizione scende sotto invece di essere schiacciata fuori. */
  .kpi {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 14px;
  }

  .kpi__note {
    grid-column: 1 / -1;
  }
}


/* --- Il business case si chiude, e si riapre da solo quando ha qualcosa -----
 *
 * Chiuso, la conversazione prende tutta la zona di lavoro: `--split` a uno.
 * La traccia della colonna sta in una variabile perche' deve poter valere sia
 * `minmax(...)` sia `0px` — una lunghezza sola non basterebbe a esprimere
 * entrambe, e cambiare l'intera `grid-template-columns` in due punti diversi
 * e' il modo di farli divergere.
 */

.workspace[data-dossier="hidden"] {
  --split: 1;
  --gutter-right: 0px;
  --dossier-track: 0px;
}

.workspace[data-dossier="hidden"] .case-sheet {
  opacity: 0;
  pointer-events: none;
  transform: translateX(0.75rem);
}

.workspace[data-dossier="hidden"] .splitter:not(.splitter--sidebar) {
  pointer-events: none;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .case-sheet {
    transition: opacity 180ms var(--ease-out), transform 260ms var(--ease-out);
  }
}

/* La maniglia di destra e' speculare a quella del pannello: dentro il foglio
   quando e' aperto, sul bordo dello schermo quando e' chiuso. */
/* Il selettore ripete `:not(--inline)` per pareggiare la specificita' della
 * regola generale: quella dichiara `left: 0.7rem` con due classi, e una sola
 * classe non la batte. Senza, la maniglia del business case restava ancorata a
 * sinistra, sopra il marchio del pannello. */
.drawer-handle--right:not(.drawer-handle--inline) {
  position: fixed;
  top: 0.7rem;
  right: 0.7rem;
  left: auto;
  z-index: var(--z-sticky);
  visibility: hidden;
  background: var(--workroom-raised);
  opacity: 0;
}

body:has(.workspace[data-dossier="hidden"]) .drawer-handle--right {
  visibility: visible;
  opacity: 1;
}

/* Il chevron indica dove va il foglio: fuori a destra quando lo chiudi,
   dentro quando lo richiami. */
.chevron {
  width: 15px;
  height: 15px;
}

#dossier-open .chevron {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: no-preference) {
  .chevron {
    transition: transform 220ms var(--ease-out);
  }
}

/* Il chevron sta fuori dal gruppo che va a capo.
 *
 * Dentro `.case-sheet__actions` era il terzo bottone di una riga che wrappa:
 * stringendo il foglio finiva sotto gli export, cioe' proprio dove non lo si
 * cerca. Ora titolo e comandi vanno a capo fra loro dentro `__head`, e la
 * maniglia resta in alto a destra qualunque cosa accada. */
.case-sheet__head {
  display: flex;
  /* Base zero, non `auto`: con `flex-wrap` sul masthead una base pari al
     contenuto supera la riga, e il flex manda a capo **prima** di comprimere —
     il chevron finiva sotto invece di stringere il titolo. */
  flex: 1 1 0;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
  gap: 12px 24px;
}

#dossier-toggle {
  flex: none;
  margin-block-start: 2px;
}