/*
 * I colori di xOS dentro Element, nei due temi.
 *
 * ## Perché non sta in config.json, che era la strada chiesta
 *
 * Element **ha** i temi personalizzati nel file di configurazione
 * (`setting_defaults.custom_themes`), e sarebbero la strada giusta. Su
 * `element-web:v1.12.28` però le chiavi che un tema personalizzato sa
 * colorare — `timeline-background-color`, `roomlist-background-color`,
 * `accent-color` — **non esistono più nel pacchetto**: `grep -c` su
 * `bundle.css` le dà tutte e tre a **zero**. Questa versione è passata ai
 * token di Compound (`--cpd-color-*`), e un tema personalizzato scritto in
 * config.json comporrebbe un oggetto che non colora niente: la schermata
 * resterebbe identica, senza un errore da nessuna parte.
 *
 * **E ce n'è una seconda, che conta di più.** `getEffectiveTheme()` nel
 * pacchetto fa: se `use_system_theme` è acceso, chiama `themeBasedOnSystem()`,
 * che risponde `"dark"` o `"light"` — i temi **di serie**, mai uno
 * personalizzato. Cioè: o Element segue il tema di sistema, o usa i colori di
 * un tema personalizzato. Le due cose chieste, in config.json, si escludono a
 * vicenda.
 *
 * Ridipingere i token invece vale per **qualunque** tema Element scelga. Così
 * restano vere tutte e due: i colori sono quelli di xOS, e il tema segue
 * quello di sistema.
 *
 * ## La specificità, che è la parte in cui si sbaglia
 *
 * Element dichiara i propri token su `.cpd-theme-light.cpd-theme-light` —
 * la classe **ripetuta**, apposta per alzare la specificità. Un selettore
 * semplice qui sotto perderebbe, e il foglio sembrerebbe ignorato. Si ripete
 * uguale, e a parità di specificità vince chi arriva dopo: questo foglio è
 * iniettato in fondo a `</head>`.
 *
 * I valori vengono dai token di xOS in `xos-web/src/index.css`. **La mappa
 * definitiva la passa Design**: quando arriva si cambiano i valori qui dentro
 * e nient'altro.
 */

/* ── L'accento è azzurro dal 23/09/2026, e qui era rimasto rosso ──────
 *
 * Questo foglio è nato quando `--accent` di xOS era rosso. Dal 23 settembre
 * l'accento del prodotto è azzurro — `oklch(.66 .15 255)` — e il rosso è
 * rimasto solo come `--critical`, cioè **l'errore**. Fino al 28/09/2026 la chat
 * ha dipinto i propri pulsanti d'azione col colore che il prodotto usa per i
 * guasti: è lo stesso difetto descritto qui sotto — «un'azione normale vestita
 * da guasto insegna che ogni avviso è un guasto» — tornato per l'altra strada.
 * Allora era `accent-strong` sul riposo, stavolta era l'accento di ieri.
 *
 * I valori convertiti dagli `oklch` di `src/index.css` li ha misurati la
 * sessione di design leggendoli sul `body` col browser: è l'unico strumento che
 * vede il colore della pagina invece del file servito.
 */
/* ─────────────────────────────────────────────────────────────── chiaro */
.cpd-theme-light.cpd-theme-light {
  --cpd-color-theme-bg: #F5F2EC;              /* paper */
  --cpd-color-bg-canvas-default: #F5F2EC;
  --cpd-color-bg-subtle-secondary: #EFEBE3;   /* paper-tint */
  --cpd-color-bg-subtle-primary: #DDDAD3;     /* hairline */
  --cpd-color-bg-action-primary-rest: #005BB5;    /* accent, tema chiaro */
  --cpd-color-bg-action-primary-hovered: #0049A1; /* accent-strong */
  --cpd-color-bg-action-primary-pressed: #0049A1;
  --cpd-color-bg-accent-rest: #005BB5;
  --cpd-color-text-primary: #16181C;          /* graphite */
  --cpd-color-text-secondary: #5B5F67;        /* graphite-500 */
  --cpd-color-text-on-solid-primary: #EDEAE3; /* on-accent = bg-void, tema chiaro */
  --cpd-color-text-action-accent: #005BB5;
  --cpd-color-border-interactive-secondary: #DDDAD3;
  --cpd-color-border-interactive-primary: #5B5F67;
  --cpd-color-icon-accent-tertiary: #005BB5;
  --cpd-color-text-success-primary: #1F5C3D;
  /* Vedi il blocco scuro: il rosso critico resta quello di Element finché la
   * mappa di Design non ha un token suo. Nel chiaro il valore coincideva già
   * con un rosso vero, e resta per continuità visiva. */
  --cpd-color-text-critical-primary: #CC0012;
}

/* ───────────────────────────────────────────────────────────────── scuro */
.cpd-theme-dark.cpd-theme-dark {
  --cpd-color-theme-bg: #0C0E13;              /* paper */
  --cpd-color-bg-canvas-default: #0C0E13;
  --cpd-color-bg-subtle-secondary: #1D2025;   /* paper-tint */
  --cpd-color-bg-subtle-primary: #3C4049;     /* hairline */
  /* ── L'accento, e non l'accento-forte ─────────────────────────────────
   *
   * `accent` è #4C94EC; `accent-strong` è #6BADFF ed è **il colore che
   * serviva al riposo di un'altra cosa**. Tenerlo qui produceva l'effetto che
   * Design ha visto: il pulsante «Continua» dipinto esattamente del colore
   * che questo stesso foglio usava per l'errore. Un pulsante d'azione vestito
   * da guasto insegna che ogni avviso è un guasto, e allora nessuno legge più
   * gli avvisi veri.
   *
   * I due numeri di questo paragrafo erano #E45361 e #FF6976 fino al
   * 28/09/2026: i rossi di quando l'accento del prodotto era rosso. Aggiornarli
   * insieme ai valori non è pulizia — un commento che nomina colori che il file
   * sotto non usa più manda a cercare un difetto che non c'è.
   *
   * `accent-strong` resta dov'è il suo mestiere: il passaggio del mouse.
   */
  --cpd-color-bg-action-primary-rest: #4C94EC;    /* accent */
  --cpd-color-bg-action-primary-hovered: #6BADFF; /* accent-strong */
  --cpd-color-bg-action-primary-pressed: #6BADFF;
  --cpd-color-bg-accent-rest: #4C94EC;
  --cpd-color-text-primary: #F5F2EC;          /* graphite */
  --cpd-color-text-secondary: #BDBAB2;        /* graphite-500 */
  --cpd-color-text-on-solid-primary: #08090C; /* on-accent = bg-void */
  --cpd-color-text-action-accent: #4C94EC;
  --cpd-color-border-interactive-secondary: #3C4049;
  --cpd-color-border-interactive-primary: #BDBAB2;
  --cpd-color-icon-accent-tertiary: #4C94EC;
  --cpd-color-text-success-primary: #64C494;

  /* ── Il rosso dell'errore **non** si ridipinge ────────────────────────
   *
   * Qui c'era `#FF6976`, che è `accent-strong`: l'errore e l'azione erano lo
   * stesso colore. La mappa di Design (`integrazioni/tema-xos.json`) **non ha
   * un token critico** — ha solo le varianti dell'accento — e inventarne uno
   * qui vorrebbe dire scegliere un colore di prodotto dentro un foglio di
   * compatibilità.
   *
   * Quindi si lascia il rosso di Element, che è un rosso vero e si distingue
   * dall'accento. Quando Design passerà un token critico, questa riga torna
   * con quel valore. **Aperto, e detto.**
   */
}

/*
 * ── Collegamenti verso l'esterno ──────────────────────────────────────────
 *
 * Trovati aprendo Element con il browser automatico ed entrando come un
 * dipendente: **non stanno nell'applicazione, stanno nelle schermate di
 * accesso e di verifica**, che è dove nessuno pensa di guardare e dove invece
 * si passa il primo giorno.
 *
 * Il piè di pagina «Blog · Mastodon · GitHub · Offerto da Matrix» compare
 * sotto la finestra «Conferma la tua identità digitale». Si toglie il piè di
 * pagina intero — riconosciuto dal collegamento che contiene — perché dentro
 * non c'è altro: nascondere i quattro collegamenti lascerebbe una striscia
 * vuota alta trenta pixel.
 *
 * `[href^=…]` e non una classe: gli indirizzi li scrivono gli autori, le
 * classi le genera il compilatore.
 */
footer[role="contentinfo"]:has(a[href^="https://element.io"]) {
  display: none !important;
}

a[href^="https://element.io"],
a[href^="https://matrix.org"],
a[href*="mastodon.matrix.org"],
a[href*="github.com/element-hq"] {
  display: none !important;
}

/*
 * **Quello che resta, e perché.** «Conferma la tua identità digitale» e
 * «Verifica questo dispositivo» non sono inviti commerciali: sono la
 * cifratura da un capo all'altro che chiede di fidarsi di questo computer.
 * Toglierla vorrebbe dire togliere la cifratura.
 */

/*
 * ── Lo spazio in fondo, alto quanto il Dock ───────────────────────────────
 *
 * **24 px**, il valore passato da Design. Dentro xOS il riquadro arriva fino
 * in fondo alla finestra e il Dock ci galleggia sopra: senza questo spazio le
 * ultime righe — il cestino di AppFlowy, il campo per scrivere di Element —
 * finiscono sotto il Dock, e si vedono a metà.
 *
 * `padding-bottom` sul corpo e non un margine sul contenitore: un margine
 * sposterebbe anche lo sfondo, e sotto il Dock comparirebbe una striscia di
 * un altro colore.
 *
 * Un valore solo, qui: quando il Dock cambia altezza si cambia questa riga.
 */
body {
  padding-bottom: 24px !important;
  box-sizing: border-box;
}

/*
 * ── Nessun riquadro, nessun margine: tutta la larghezza e tutta l'altezza ──
 *
 * La regola è una sola per tutti i moduli incorniciati (Frappe, AppFlowy,
 * Element): dentro xOS **la cornice è xOS**, e l'applicazione riempie lo
 * spazio fra la banda e la linea del Dock. Un secondo riquadro dentro il
 * primo — un margine, un'ombra, un angolo arrotondato — racconta che sotto
 * c'è un altro prodotto, che è esattamente ciò che si sta togliendo.
 *
 * `padding-bottom` **non si tocca qui**: quello è lo spazio del Dock, e sta
 * nel blocco sopra. Azzerarlo insieme agli altri lati rimetterebbe le ultime
 * righe sotto la linea.
 */
html {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

body {
  margin: 0 !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  /* Una barra orizzontale dentro un riquadro senza margini è quasi sempre un
   * elemento che sborda di pochi pixel, non contenuto da leggere. */
  overflow-x: hidden;
}

#matrixchat, .mx_MatrixChat_wrapper {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}