/* The web build's marks: what this tab cannot do, and where the app is.
   Every colour is one of the app's own theme tokens, so everything follows
   light and dark with the page; the fallbacks are for a build that lacks a
   token. No font is fetched: the families named are the ones the app loads. */

/* ---- the tag ---- */
.wo-pill {
  margin-left: auto;
  flex: none;
  align-self: center;
  font-size: 10px;
  line-height: 16px;
  font-weight: 500;
  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);
}

/* ---- a marked control: in its place, quieter ----
   `[data-wo-feature]` is the mark itself (local-only.js `block`): React
   rewrites a node's whole className when its own value changes. The tag
   carries the attribute too, so it is excluded from the dimming. */
[data-wo-feature]:not(.wo-pill) { opacity: .62; cursor: pointer; }
[data-wo-feature]:not(.wo-pill):hover { opacity: .9; }
/* A maker's heading in the model menu dims with its rows; it is not a control. */
[data-wo-shade] { opacity: .62; }
.wo-row { display: flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; }
.wo-row .wo-pill { margin-left: auto; }

/* ---- the settings nav column ----
   164px for icon + label + tag: at the tag's ordinary size the label lost and
   read "Mod…". The label names the section, so the TAG gives way first. */
[class*="navCell"] .wo-pill { font-size: 9px; padding: 0 4px; letter-spacing: .02em; }

/* ---- the Cedreon mark: the logo's ring ---- */
.wo-mark {
  display: block; flex: none; box-sizing: border-box;
  width: 30px; height: 30px; border-radius: 50%;
  border: 5px solid var(--dsw-alias-label-primary, #101114);
}

/* ---- the rail's Download entry ----
   It wears the Personalisation entry's own classes (copied by script), so
   only what an anchor does differently from a button is set here. */
a.wo-rail-dl { text-decoration: none; color: inherit; box-sizing: border-box; margin-bottom: 4px; }
a.wo-rail-dl:focus-visible { outline: 2px solid var(--dsw-alias-label-primary, #101114); outline-offset: -2px; }

/* ---- the dialog ---- */
.wo-dialog {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  box-sizing: border-box; padding: 16px;
  background: var(--dsw-alias-bg-mask-1, rgba(0, 0, 0, .24));
  animation: wo-fade .16s ease-out;
}
@keyframes wo-fade { from { opacity: 0; } }
.wo-dialog-card {
  position: relative; box-sizing: border-box;
  width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto;
  padding: 28px 28px 22px;
  border-radius: 16px;
  background: var(--dsw-alias-bg-layer-1, #fff);
  color: var(--dsw-alias-label-primary, #101114);
  box-shadow: var(--dsw-shadow-lv3, 0 0 1px 0 rgba(16, 17, 20, .2), 0 12px 30px 0 rgba(16, 17, 20, .1));
  font-size: 14px; line-height: 1.55; text-align: left;
  animation: wo-pop .18s ease-out;
}
@keyframes wo-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.wo-dialog-card:focus { outline: none; }
.wo-dialog-close {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--dsw-alias-label-caption, #666a73); cursor: pointer;
}
.wo-dialog-close:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(16, 17, 20, .05)); color: var(--dsw-alias-label-primary, #101114); }
.wo-dialog-eyebrow {
  margin: 18px 0 0;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 10.5px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dsw-alias-label-caption, #666a73);
}
.wo-dialog-title {
  margin: 4px 0 0;
  font-family: var(--cedreon-font-display, 'Spectral', Georgia, serif);
  font-size: 27px; line-height: 34px; font-weight: 400; letter-spacing: -.01em;
  color: inherit;
}
.wo-dialog-body { margin: 10px 0 0; color: var(--dsw-alias-label-secondary, #33363d); }
.wo-dialog-list { margin: 12px 0 0; padding: 0; list-style: none; color: var(--dsw-alias-label-secondary, #33363d); }
.wo-dialog-list li { position: relative; padding: 3px 0 3px 24px; }
.wo-dialog-list li::before {
  content: ''; position: absolute; left: 3px; top: 9px;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--dsw-alias-state-success-primary, #2f6b45);
  border-bottom: 1.6px solid var(--dsw-alias-state-success-primary, #2f6b45);
  transform: rotate(-45deg);
}
.wo-dialog-actions { display: flex; gap: 8px; margin-top: 22px; }
.wo-dialog-cta, .wo-dialog-other {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  box-sizing: border-box; height: 38px; padding: 0 16px; border-radius: 10px;
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.wo-dialog-cta {
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: var(--dsw-alias-brand-primary, #101114);
  color: var(--dsw-alias-label-primary-foreground, #fff);
}
.wo-dialog-cta:hover { background: var(--dsw-alias-button-primary-hover, #33363d); }
.wo-dialog-other {
  flex: 0 1 auto;
  border: 1px solid var(--dsw-alias-border-l2, rgba(16, 17, 20, .14));
  background: transparent; color: inherit;
}
.wo-dialog-other:hover { background: var(--dsw-alias-interactive-bg-hover, rgba(16, 17, 20, .05)); }
.wo-dialog-cta:focus-visible, .wo-dialog-other:focus-visible, .wo-dialog-close:focus-visible,
.wo-dialog-link:focus-visible {
  outline: 2px solid var(--dsw-alias-label-primary, #101114); outline-offset: 2px;
}
.wo-dialog-foot { margin: 14px 0 0; font-size: 12px; color: var(--dsw-alias-label-caption, #666a73); }
/* After a download: the file to look for, in the mono register the product
   uses for things a reader types or finds, and the one Windows prompt. */
.wo-dialog-file {
  margin: 14px 0 0; padding: 8px 12px;
  border: 1px solid var(--dsw-alias-border-l1, rgba(16, 17, 20, .10)); border-radius: 10px;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 12.5px; line-height: 18px; overflow-wrap: anywhere;
  color: var(--dsw-alias-label-primary, #101114);
}
.wo-dialog-note { margin: 10px 0 0; font-size: 13px; color: var(--dsw-alias-label-secondary, #33363d); }
.wo-dialog-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.wo-dialog-link:hover { color: var(--dsw-alias-label-primary, #101114); }
@media (prefers-reduced-motion: reduce) { .wo-dialog, .wo-dialog-card { animation: none; } }

/* ---- Download, where the models are chosen ----
   The model menu's last row: the menu's own option classes, an anchor, set
   apart from the models by a hairline. And the button under Settings > Models
   > Custom providers, in the dialog's primary register at a settings size. */
a.wo-menu-dl {
  text-decoration: none; color: inherit; cursor: pointer;
  margin-top: 4px; border-top: 1px solid var(--dsw-alias-border-l1, rgba(16, 17, 20, .10));
  border-top-left-radius: 0; border-top-right-radius: 0;
}
a.wo-menu-dl > svg { flex: 0 0 16px; color: var(--dsw-alias-label-secondary, #33363d); }
.wo-menu-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary, #666a73);
}
a.wo-models-dl {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  box-sizing: border-box; min-height: 32px; max-width: 100%; margin-top: 10px; padding: 6px 12px;
  border-radius: 8px; border: 1px solid transparent;
  background: var(--dsw-alias-brand-primary, #101114);
  color: var(--dsw-alias-label-primary-foreground, #fff);
  font-size: 13px; font-weight: 500; line-height: 18px; text-decoration: none; cursor: pointer;
}
/* The Settings window keeps two columns on a phone, so its text column can be
   narrower than the label: the button wraps inside the column, never past it. */
a.wo-models-dl > svg { flex: none; }
a.wo-models-dl:hover { background: var(--dsw-alias-button-primary-hover, #33363d); }
a.wo-menu-dl:focus-visible, a.wo-models-dl:focus-visible {
  outline: 2px solid var(--dsw-alias-label-primary, #101114); outline-offset: 2px;
}

/* ---- one line under the last finished reply ---- */
.wo-nudge {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  box-sizing: border-box;
  margin: 0 0 24px var(--wo-assistant-gutter, 0px);
  padding: 10px 14px;
  border: 1px solid var(--dsw-alias-border-l1, rgba(16, 17, 20, .10));
  border-radius: 12px;
  font-size: 13px; line-height: 1.5;
  color: var(--dsw-alias-label-caption, #666a73);
}
.wo-nudge-text { flex: 1 1 260px; }
.wo-nudge-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500; white-space: nowrap; text-decoration: none;
  color: var(--dsw-alias-label-primary, #101114);
}
.wo-nudge-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- 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;
  }
}

/* ---- on a phone: the dialog's buttons stack ---- */
@media (max-width: 700px) {
  .wo-dialog-card { padding: 24px 20px 18px; }
  .wo-dialog-actions { flex-direction: column; }
  .wo-dialog-cta, .wo-dialog-other { width: 100%; height: 44px; }
}