/* The web build wears one tag: what this tab cannot do, and the app can.
   Everything is drawn from currentColor so it follows the app's own theme. */

.wo-pill {
  text-decoration: none;
  margin-left: auto;
  flex: none;
  align-self: center;
  font-size: 10px;
  line-height: 16px;
  letter-spacing: .04em;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
  color: color-mix(in srgb, currentColor 72%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s;
}
.wo-pill.wo-inline { margin-left: 6px; }
.wo-pill:hover {
  border-color: color-mix(in srgb, currentColor 46%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
}

/* An injected chip/row borrows the app's own class, then dims itself. */
/* `[data-wo-name]` is the mark itself (local-only.js `block`): React rewrites
   a node's whole className when its own value changes, and the class went
   missing on a menu row the moment it was highlighted. */
.wo-chip, .wo-row, .wo-blocked, [data-wo-name] { opacity: .62; cursor: pointer; }
.wo-chip:hover, .wo-row:hover, .wo-blocked:hover, [data-wo-name]:hover { opacity: .9; }
.wo-chip { border: 1px dashed color-mix(in srgb, currentColor 28%, transparent) !important; }
.wo-row { display: flex; align-items: center; gap: 8px; }
/* The app's reset gives its own buttons border-box; an injected div inherits
   nothing, so its padding would push it past a clipping menu. */
.wo-chip, .wo-row, .wo-railnote {
  text-decoration: none; box-sizing: border-box; max-width: 100%; }
.wo-row .wo-pill { margin-left: auto; }

.wo-railnote {
  display: block;
  margin: 0 10px 6px;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, currentColor 62%, transparent);
  background: color-mix(in srgb, currentColor 5%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  cursor: pointer;
  text-align: left;
  width: auto;
}
/* `.wo-railnote` sets `display: block`, which ties on specificity with the
   UA's `[hidden]` rule and wins on order — so hiding it from script needs
   this line or the element stays on screen, still reported by the DOM as
   present. */
.wo-railnote[hidden] { display: none !important; }
.wo-railnote:hover { color: color-mix(in srgb, currentColor 85%, transparent); }
.wo-railnote b { font-weight: 600; }

/* ---- one line, bottom centre ---- */
.wo-toast {
  position: fixed; z-index: 2147483000; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 13px; line-height: 1.4;
  background: var(--wo-bg, Canvas); color: var(--wo-fg, CanvasText);
  border: 1px solid color-mix(in srgb, var(--wo-fg, CanvasText) 14%, transparent);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
  animation: wo-rise .18s ease-out;
}
@keyframes wo-rise { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .wo-toast { animation: none; } }
.wo-toast-link { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---- the settings nav column ----
   That column is 164px wide and the row is icon + label + tag. At the tag's
   ordinary size the label lost the fight and the headings rendered "Mod…" and
   "Plug…" — a section name nobody can read, which is a worse outcome than a
   quieter tag. The label names the section, so the TAG gives way first.
   Shrunk rather than hidden: a tag that disappears at a certain width stops
   being a promise the reader can rely on. */
[class*="navCell"] .wo-pill {
  font-size: 9px;
  padding: 0 4px;
  letter-spacing: .02em;
}

/* ---- one alignment the product owes both sides ----------------------------
   STOPGAP, and it belongs upstream. `MessageItem.tsx` renders the user turn's
   icon row with `className={css.actions}` (twice, lines 306 and 336) and
   `MessageItem.module.css` defines no `.actions` at all — the class resolves
   to `undefined`, so the row gets no offset. The assistant's own module does
   carry one, with its reason written down:

       .actions { margin-left: -6px }   /* AssistantMarkdown.module.css
       "Optical align with 28px icon hit targets that pad 6px past the glyph."

   So the two sides follow different rules. Measured at 1200px: the assistant's
   glyph starts at x=362, exactly where its text starts; the user's glyph ends
   at 1104 while the bubble ends at 1110 — six pixels short, on the side the
   eye reads against a filled bubble. Mirrored here so the web build reads
   right. The real fix is one line in MessageItem.module.css and the DESKTOP
   app needs it too; delete this the day that lands.

   Keyed on the CSS-module NAME, not the build hash, because `_5OXjLG_` is
   regenerated on every build of that package and a rule keyed on it would
   stop applying in silence. */
[class*="userRow"] > [class*="actions"] { margin-right: -6px; }

/* ---- and the same alignment the OTHER side owes the reader ----------------
   STOPGAP, and it belongs upstream too. `AssistantNodeView` indents the reply
   past the heading's mark (`--assistant-gutter`, 20px mark + 10px gap, set
   INLINE and only when it actually draws a heading), while the turn's own meta
   line — "01:38 · Answered by … · Ran for 2s · TTFT 2.6s" plus the copy and
   branch controls — is a SEPARATE flow node that never sees that variable and
   keeps `TurnTailNodeView.module.css`'s bare `margin-left: -6px`.

   Measured at 1200px on a replayed turn: the glyphs began at x=356 (optical
   edge 362, the flow's own left) and the paragraph above them at x=392. Thirty
   pixels out, on the one row a reader reads against the text it describes.

   The offset is NOT hard-coded here. `local-only.js` copies the gutter off the
   assistant node this tail belongs to into `--wo-assistant-gutter`, so a turn
   that draws no heading — an empty model, an interrupted reply — copies
   nothing and keeps exactly the edge it had. The real fix is for the product to
   put the two in one wrapper; delete this the day that lands. */
[data-turn-tail] > [class*="actions"] {
  margin-left: calc(var(--wo-assistant-gutter, 0px) - 6px);
}

/* ---- il telefono ----------------------------------------------------------
   Questo build e' quello dell'app desktop, e su un telefono si vede: la
   colonna sinistra si riduce a una striscia di icone larga 56px che non
   mostra piu' ne' etichette ne' elenco delle chat, e su 390px si tiene il
   14% della larghezza per non dire niente. Il posto del composer arriva fino
   al bordo inferiore, dove su un iPhone passa la barra di sistema. Ogni
   comando misura fra 28 e 36 pixel, sotto i 44 che un dito si aspetta. E la
   colonna dei dettagli, chiusa, tiene il proprio tasto di chiusura a x=411
   su una finestra larga 390: un comando fuori dallo schermo.

   Tutto qui dentro e' confinato ai telefoni e agganciato ai NOMI delle
   classi, mai al prefisso di build (`_5SAEKq_` cambia a ogni compilazione),
   piu' i due attributi che la shell scrive da se'. Appena una delle due
   colonne laterali si apre, niente di questo si applica e l'app torna a
   disporre le cose come sa. */
@media (max-width: 700px) {
  /* 1. La griglia ha TRE colonne — pannello, centro, dettagli — e chiuse le
        laterali valgono zero. Riscriverne due lascia la terza a una traccia
        implicita; e togliere la colonna dal flusso con `position: fixed`
        sposta di una traccia tutte le altre e manda il CENTRO nella traccia
        da zero. Entrambe le cose danno una pagina bianca: provate. Percio'
        la colonna resta dov'e', larga zero, e lascia uscire solo il tasto
        che la riapre. */
  [data-sidebar-collapsed="true"][data-details-collapsed="true"]:has(> [class*="sidebarCol"]) {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  }
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] {
    overflow: visible;
    pointer-events: none;
  }
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] > *,
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] > * > * {
    width: 0 !important;
    min-width: 0 !important;
    overflow: visible;
    background: none !important;
    border: none !important;
  }
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] [class*="newSession"],
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] [class*="navActions"],
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] [class*="regionArea"],
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] [class*="footArea"] {
    display: none !important;
  }
  [data-sidebar-collapsed="true"] > [class*="sidebarCol"] [class*="logoRow"] {
    position: fixed;
    top: 8px;
    left: 8px;
    width: 40px !important;
    pointer-events: auto;
    z-index: 45;
  }
  /* Il titolo della conversazione parte dove quel tasto finisce, invece di
     passargli sotto. */
  [data-sidebar-collapsed="true"] [class*="titleRow"] { padding-left: 44px; }
  /* E lo stesso vale per i pannelli che si aprono sopra — Protection,
     Documents, Personalisation — dove il titolo parte a 28px e il tasto
     arriva a 48: la "P" di "Protection" finiva sotto il cerchio. */
  [data-sidebar-collapsed="true"] [class*="pane"] > [class*="head"] { padding-left: 60px; }

  /* 1b. APERTO, il pannello vale 280px e l'app STRINGE il centro: su 390
         restano 110px di conversazione, che non e' una conversazione. Su un
         telefono un pannello si sovrappone. Stesso accorgimento: la colonna
         resta nella griglia a larghezza zero e a uscire e' il pannello che
         contiene, agganciato a `data-slot`, che e' un attributo del prodotto
         e non un nome generato. Il tasto per richiudere sta dentro, in cima,
         dov'era. */
  :has(> [class*="sidebarCol"]):not([data-sidebar-collapsed]) {
    grid-template-columns: 0 minmax(0, 1fr) 0 !important;
  }
  :has(> [class*="sidebarCol"]):not([data-sidebar-collapsed]) > [class*="sidebarCol"] {
    overflow: visible;
  }
  :has(> [class*="sidebarCol"]):not([data-sidebar-collapsed]) [data-slot="sidebar"] > * {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(300px, 86vw) !important;
    z-index: 50;
    box-shadow: 0 6px 44px rgba(0, 0, 0, .26);
  }

  /* 2. Un comando irraggiungibile e' peggio di un comando assente. Aperta,
        la colonna dei dettagli resta com'e': e' l'unico stato in cui ha
        qualcosa da mostrare. */
  [data-details-collapsed="true"] > [class*="detailsCol"] { display: none !important; }

  /* 3. La barra di sistema dell'iPhone passa sotto il composer. */
  [class*="composerSeat"] { padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* 4. La riga sotto una risposta — "12:12 · Answered by openai/gpt-5.6-luna
        · Ran for 2s · TTFT 2.6s" — e' uno span con `white-space: nowrap`
        largo 484px in una colonna da 318: usciva dal bordo e veniva tagliata
        a meta' parola. Su un telefono va a capo. */
  [data-turn-tail] > [class*="actions"] { flex-wrap: wrap; row-gap: 2px; }
  [data-turn-tail] [class*="timeEnd"] { white-space: normal; }

  /* 5. Il dito e' piu' largo dell'icona. L'area sensibile cresce con uno
        pseudo-elemento invece che con min-height: cambiare l'altezza vera
        sformerebbe la riga che li contiene, alta 32. */
  [class*="composerSeat"] button { position: relative; }
  [class*="composerSeat"] button::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: inherit;
  }
}