/* ============================================================
   PYROLIS SUPERADMIN — app-scoped violet recolor (inventory §B.1)
   ============================================================
   The console interne reuses the shared design system verbatim
   (pyrolis_web's pyrolis.css + IBM Plex fonts, served straight from that
   app's priv/static — see the endpoint), but overrides the `--fire`
   accent to violet/indigo so it is visually unmistakable from the
   orange client app. Scoped to the `.console-violet` wrapper class the
   ConsoleShell renders around every /console/* page — the shared
   tokens.css/pyrolis.css are NEVER edited for this.
   ============================================================ */
.console-violet {
  --fire: oklch(0.55 0.14 265);
  --fire-deep: oklch(0.46 0.13 265);
  --fire-soft: oklch(0.93 0.03 265);
}

/* The sidebar is deliberately a distinct near-black indigo (not --coal)
   — inventory §B.1's own literal value. */
.console-violet .bo-side {
  background: oklch(0.2 0.02 265);
}

/* ============================================================
   Tickets support — the thread drawer (`/console/tickets`)
   ============================================================
   `PyrolisWeb.Components.TicketThread` is shared with the customer
   console, which carries these families in its own bundled app.css
   (they are NOT in pyrolis.css, which this app serves straight from
   pyrolis_web). Ported verbatim rather than referenced, because the two
   apps' stylesheets have no common file to put them in — and a thread
   that renders unstyled on one side is exactly the drift the shared
   component exists to prevent. Only the families the thread uses are
   here: the create form's `.tk-kinds`/`.tk-prio`/`.tk-sent` belong to
   the customer side alone.

   `--fire*` resolves to violet inside `.console-violet`, so a support
   message reads in the internal console's own accent. */
.tk-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tk-thread { display: grid; gap: 12px; margin-bottom: 16px; }
.tk-msg { display: flex; gap: 10px; }
.tk-msg > div { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: var(--r-2); padding: 10px 12px; background: var(--surface); }
.tk-msg.support > div { background: var(--fire-soft); border-color: var(--fire); }
.tk-msg b { display: block; font-size: 12px; }
.tk-msg p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.tk-msg i { display: block; font-style: normal; font-size: 10.5px; color: var(--ink-3); margin-top: 6px; }
.tk-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.tk-msg.support .tk-av { background: var(--fire); color: #fff; }