/**
 * MageTicket
 *
 * Fichier        : public/assets/css/operations.css
 * Rôle           : Couche visuelle premium des widgets cockpit et des centres opérationnels partagés.
 * Auteur         : Régis KREMER
 * Version        : 0.33.64
 * Version projet : 0.33.0
 * Révision       : 0.33.64
 * Lot            : MAGETICKET TICKET SUBMISSION MEDIA FINALIZATION RECEIVER VISIBILITY UX1
 * Base requise   : 0.33.63
 * Créé le        : 2026-07-22
 * Modifié le     : 2026-07-28
 * Dépendances    : tokens.css, components.css, cockpit-runtime.css, shell.css et modules opérationnels.
 * Contraintes    : aucun changement métier ; PC, tablette et mobile ; WCAG 2.2 AA ; thèmes clair, sombre et système.
 * Modifications  : État courant dédié des cartes et disposition donut à gauche, légende à droite selon la largeur du widget.
 */

/* --------------------------------------------------------------------------
   Langage commun des centres opérationnels
   -------------------------------------------------------------------------- */








.eyebrow,
.panel-eyebrow {
  color: var(--info);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}



/* --------------------------------------------------------------------------
   Cockpit et workspace ticket
   -------------------------------------------------------------------------- */
.app-shell-content > .cockpit-workspace { min-height: 100%; background: var(--bg); }
.cockpit-dashboard {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  background: var(--bg);
}

.cockpit-dashboard > :is(.connection-banner,.workspace-alert,.state-surface) { margin-inline: var(--space-4); }
.cockpit-dashboard .connection-banner,
.cockpit-dashboard .workspace-alert { border-radius: var(--r-sm); box-shadow: none; }

.cockpit-dashboard .kpi-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: none;
}
.cockpit-dashboard .kpi-card.kpi-blue { border-top-color: var(--info); }
.cockpit-dashboard .kpi-card.kpi-orange { border-top-color: var(--warning); }
.cockpit-dashboard .kpi-card.kpi-green { border-top-color: var(--success); }
.cockpit-dashboard .kpi-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.cockpit-dashboard .kpi-card h2 { margin: 0 0 2px; color: var(--muted); font-size: var(--fs-xs); font-weight: 750; }
.cockpit-dashboard .kpi-card strong { display: block; margin: 0; font-size: var(--fs-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.cockpit-dashboard .kpi-card p { margin: 4px 0 0; overflow: hidden; color: var(--muted-2); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }

.cockpit-dashboard .panel {
  min-width: 0;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: none;
}
.cockpit-dashboard .panel-title {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 9px var(--space-3);
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.cockpit-dashboard .panel-title > div:first-child { display: grid; gap: 2px; }
.cockpit-dashboard .panel-title h2 { margin: 0; font-size: var(--fs-base); }
.cockpit-dashboard .panel-title-actions { display: flex; gap: var(--space-1); }
.cockpit-dashboard .queue-panel { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; overflow: hidden; }
.cockpit-dashboard .panel-search { min-height: 38px; margin: var(--space-2); }
.cockpit-dashboard .ticket-list { min-height: 0; padding: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard .cockpit-queue-card {
  width: 100%;
  min-width: 0;
  min-height: 102px;
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 7px;
  padding: 10px var(--space-3);
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.cockpit-dashboard .cockpit-queue-card:hover { background: var(--surface-soft); }
.cockpit-dashboard .cockpit-queue-card:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -2px; }
.cockpit-dashboard .cockpit-queue-card.is-current-ticket {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), var(--surface-soft));
}
.cockpit-dashboard .cockpit-queue-card__header,
.cockpit-dashboard .cockpit-queue-card__meta { min-width: 0; display: flex; align-items: center; gap: 7px; }
.cockpit-dashboard .cockpit-queue-card__header { justify-content: space-between; }
.cockpit-dashboard .cockpit-queue-card__reference { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .cockpit-queue-card__title { min-width: 0; display: -webkit-box; overflow: hidden; font-size: var(--fs-sm); line-height: 1.32; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.cockpit-dashboard .cockpit-queue-card__meta { flex-wrap: wrap; color: var(--muted-2); font-size: var(--fs-xs); }
.cockpit-dashboard .cockpit-queue-card__requester { min-width: 0; flex: 1 1 110px; display: inline-flex; align-items: center; gap: 6px; }
.cockpit-dashboard .cockpit-queue-card__requester > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .cockpit-queue-card__requester .avatar { width: 25px; height: 25px; flex: 0 0 25px; font-size: 10px; }
.cockpit-dashboard .cockpit-queue-card__meta time { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cockpit-dashboard .cockpit-queue-card .ticket-status-pill { flex: 0 0 auto; max-width: 48%; }
.cockpit-dashboard .cockpit-queue-card .ticket-status-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cockpit-dashboard .conversation-panel { display: grid; grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.cockpit-dashboard .ticket-content-shell {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cockpit-dashboard .ticket-header {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(120deg, var(--surface-soft), var(--surface));
}
.cockpit-dashboard .ticket-header__identity { min-width: 0; }
.cockpit-dashboard .ticket-header p { margin: 0 0 3px; color: var(--muted); font-size: var(--fs-xs); }
.cockpit-dashboard .ticket-header h1 { max-width: 760px; margin: 0; overflow: hidden; font-size: var(--fs-lg); line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .ticket-status { display: flex; align-items: center; gap: 7px; margin-top: 6px; color: var(--muted); font-size: var(--fs-xs); flex-wrap: wrap; }
.cockpit-dashboard .header-actions { display: flex; gap: var(--space-2); flex: 0 0 auto; }
.cockpit-dashboard .ticket-content-tabs { min-height: 38px; flex: 0 0 38px; border-bottom: 1px solid var(--line); }
.cockpit-dashboard .ticket-content-tabs .tab-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding-inline: 5px; border-radius: 999px; background: var(--surface-3); color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.cockpit-dashboard .ticket-tab-stage { min-height: 0; flex: 1 1 auto; display: grid; overflow: hidden; }
.cockpit-dashboard .ticket-reading-panel { min-width: 0; min-height: 0; grid-area: 1 / 1; overflow: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard [data-tab-panel="conversation"] { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.cockpit-dashboard .ticket-description { max-height: 104px; margin: 0; padding: 9px var(--space-3); overflow: auto; border-bottom: 1px solid var(--line); background: var(--surface-soft); color: var(--text); line-height: 1.45; }
.cockpit-dashboard .ticket-description__label { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; color: var(--muted); font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.cockpit-dashboard .ticket-description p { margin: 0; color: var(--text); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.cockpit-dashboard .conversation-stream { min-height: 0; padding: var(--space-3); overflow: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard .message {
  width: min(100%, 880px);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
}
.cockpit-dashboard .message.is-internal { border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); }
.cockpit-dashboard .message__content { min-width: 0; }
.cockpit-dashboard .message header { min-width: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.cockpit-dashboard .message header strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .message header span { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; margin-left: auto; color: var(--muted); font-size: var(--fs-xs); text-align: right; }
.cockpit-dashboard .message header span b { color: var(--text); font-weight: 650; }
.cockpit-dashboard .message p { margin: 7px 0 0; font-size: var(--fs-sm); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.cockpit-dashboard .message-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.cockpit-dashboard .attachment-chip { min-width: 0; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--surface); color: var(--text); }
.cockpit-dashboard .attachment-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.cockpit-dashboard .attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .timeline-list { padding: var(--space-3); }
.cockpit-dashboard .attachment-list { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); align-content: start; gap: var(--space-3); padding: var(--space-3); }
.cockpit-dashboard .attachment-list:not([hidden]) { display: grid; }
.cockpit-dashboard .attachment-card { min-width: 0; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-soft); }
.cockpit-dashboard .attachment-card__preview { min-width: 0; height: 88px; display: grid; place-items: center; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--brand); }
.cockpit-dashboard .attachment-card__preview:hover { border-color: var(--brand); }
.cockpit-dashboard .attachment-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.cockpit-dashboard .attachment-card__preview > span { display: grid; justify-items: center; gap: 5px; }
.cockpit-dashboard .attachment-card__preview .ti { font-size: 28px; }
.cockpit-dashboard .attachment-card__preview small { color: var(--muted); font-size: 10px; font-weight: 800; }
.cockpit-dashboard .attachment-card__body { min-width: 0; display: grid; align-content: start; gap: 4px; }
.cockpit-dashboard .attachment-card__body > strong { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .attachment-card__body > span,
.cockpit-dashboard .attachment-card__body > small { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.cockpit-dashboard .attachment-card__body > div { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.cockpit-dashboard .attachment-empty { min-height: 180px; grid-column: 1 / -1; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--muted); text-align: center; }
.cockpit-dashboard .attachment-empty .ti { font-size: var(--fs-2xl); }
.cockpit-dashboard .message-composer { flex: 0 0 auto; display: grid; gap: 6px; padding: 8px var(--space-3); border-top: 1px solid var(--line); background: var(--surface-soft); }
.cockpit-dashboard .message-composer textarea { width: 100%; min-height: 62px; max-height: 150px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-ctrl); background: var(--surface); color: var(--text); font: inherit; resize: vertical; }
.cockpit-dashboard .composer-actions { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.cockpit-dashboard .composer-actions [data-composer-status] { min-width: 0; overflow: hidden; color: var(--muted); font-size: var(--fs-xs); line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .attachment-picker { justify-self: start; min-width: 0; color: var(--text); }
.cockpit-dashboard .attachment-picker-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--r-ctrl); background: var(--surface); color: var(--brand); }
.cockpit-dashboard .attachment-picker-icon .ti { font-size: var(--icon-md); }
.cockpit-dashboard .attachment-picker-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .composer-submit { justify-self: end; }

.cockpit-dashboard .details-panel { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: clip; }
.cockpit-dashboard .details-panel > [data-details-content] { min-width: 0; min-height: 0; display: grid; grid-auto-rows: max-content; align-content: start; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard .details-list { margin: 0; padding: 0 var(--space-3); }
.cockpit-dashboard .details-list > div { display: grid; grid-template-columns: minmax(90px, .8fr) minmax(0, 1.2fr); gap: var(--space-2); padding: 9px 0; border-bottom: 1px solid var(--line); }
.cockpit-dashboard .details-list dt { color: var(--muted); font-size: var(--fs-xs); }
.cockpit-dashboard .details-list dd { margin: 0; overflow-wrap: anywhere; font-size: var(--fs-xs); font-weight: 650; }
.cockpit-dashboard .status-transition-form { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--line); background: var(--surface); overflow: visible; }
.cockpit-dashboard .status-transition-form .field { min-width: 0; margin: 0; }
.cockpit-dashboard .status-transition-form select { min-width: 0; min-height: 36px; padding-block: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .status-transition-form select:focus { border-color: var(--brand); outline: 2px solid var(--focus); outline-offset: 1px; }
.cockpit-dashboard .status-transition-submit { min-height: 36px; align-self: end; }
.cockpit-dashboard .status-transition-form select:disabled { color: var(--muted); background: var(--surface-soft); }
.cockpit-dashboard .ticket-relations { margin: 0; border-top: 1px solid var(--line); background: var(--surface-soft); }
.cockpit-dashboard .ticket-relations summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 750; }
.cockpit-dashboard .ticket-relations form { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.cockpit-dashboard .relation-list { padding: var(--space-3); }

.cockpit-dashboard .lifecycle-panel,
.cockpit-dashboard .chart-panel,
.cockpit-dashboard .priority-panel { grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.cockpit-dashboard .lifecycle-stage-grid {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(132px, 1fr));
  align-content: stretch;
  gap: var(--space-2);
  padding: var(--space-3);
  overflow: auto;
  overscroll-behavior: auto;
}
.cockpit-dashboard .lifecycle-stage-card {
  --stage-color: var(--brand);
  --stage-progress: 0%;
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(6px, auto);
  align-content: center;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 3px solid var(--stage-color);
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text);
  text-align: left;
}
.cockpit-dashboard .lifecycle-stage-card:hover { border-color: var(--stage-color); background: color-mix(in srgb, var(--stage-color) 7%, var(--surface)); }
.cockpit-dashboard .lifecycle-stage-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cockpit-dashboard .lifecycle-stage-card.is-selected { box-shadow: inset 0 0 0 2px var(--stage-color); background: color-mix(in srgb, var(--stage-color) 11%, var(--surface)); }
.cockpit-dashboard .lifecycle-stage-card.is-new { --stage-color: var(--brand); }
.cockpit-dashboard .lifecycle-stage-card.is-progress { --stage-color: var(--info); }
.cockpit-dashboard .lifecycle-stage-card.is-pending { --stage-color: var(--warning); }
.cockpit-dashboard .lifecycle-stage-card.is-resolved { --stage-color: var(--success); }
.cockpit-dashboard .lifecycle-stage-card.is-closed { --stage-color: var(--muted); }
.cockpit-dashboard .lifecycle-stage-card__icon { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: var(--r-sm); color: var(--stage-color); }
.cockpit-dashboard .lifecycle-stage-card__copy { min-width: 0; display: grid; gap: 3px; }
.cockpit-dashboard .lifecycle-stage-card__copy strong { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .lifecycle-stage-card__copy small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cockpit-dashboard .lifecycle-stage-card__metrics { display: grid; justify-items: end; gap: 2px; }
.cockpit-dashboard .lifecycle-stage-card__metrics b { font-size: var(--fs-lg); line-height: 1; }
.cockpit-dashboard .lifecycle-stage-card__metrics em { color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
.cockpit-dashboard .lifecycle-stage-card__bar { grid-column: 1 / -1; height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.cockpit-dashboard .lifecycle-stage-card__bar i { width: var(--stage-progress, 0%); height: 100%; display: block; border-radius: inherit; background: var(--stage-color); transition: width 180ms ease; }

.cockpit-dashboard .activity-summary { min-height: 0; height: 100%; display: grid; align-content: center; padding: var(--space-3); overflow: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard .activity-summary strong { display: block; font-size: var(--fs-2xl); }
.cockpit-dashboard .activity-summary span,
.cockpit-dashboard .activity-summary p { color: var(--muted); font-size: var(--fs-xs); }
.cockpit-dashboard {
  --priority-critical: #e5485d;
  --priority-high: #ef7382;
  --priority-medium: #e9ab35;
  --priority-low: #43ad7d;
  --priority-unset: #91a2b8;
  --donut-gradient: conic-gradient(var(--priority-unset) 0 100%);
}
.cockpit-dashboard .priority-content { min-height: 0; height: 100%; display: grid; grid-template-columns: minmax(104px, .78fr) minmax(180px, 1.22fr); align-items: center; align-content: center; gap: var(--space-4); padding: var(--space-3); overflow: auto; overscroll-behavior-y: auto; scrollbar-gutter: auto; touch-action: pan-y; }
.cockpit-dashboard .donut { position: relative; width: 88px; height: 88px; display: grid; place-items: center; justify-self: center; margin: 0; border: 0; border-radius: 50%; background: var(--donut-gradient, conic-gradient(var(--priority-unset) 0 100%)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 65%, transparent); }
.cockpit-dashboard .donut::after { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cockpit-dashboard .donut span { position: relative; z-index: 1; display: grid; justify-items: center; color: var(--muted); font-size: var(--fs-xs); }
.cockpit-dashboard .donut strong { color: var(--text); font-size: var(--fs-lg); }
.cockpit-dashboard .priority-content ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cockpit-dashboard .priority-content li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 7px; padding-block: 3px; color: var(--muted); font-size: var(--fs-xs); }
.cockpit-dashboard .critical-dot { background: var(--priority-critical); }
.cockpit-dashboard .high-dot { background: var(--priority-high); }
.cockpit-dashboard .medium-dot { background: var(--priority-medium); }
.cockpit-dashboard .low-dot { background: var(--priority-low); }
.cockpit-dashboard .unset-dot { background: var(--priority-unset); }


/* Adaptation interne à la taille réelle du widget, indépendamment du viewport. */
@container cockpit-widget (max-width: 230px) {
  .cockpit-dashboard .kpi-card { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-2); padding: var(--space-2); }
  .cockpit-dashboard .kpi-icon { width: 32px; height: 32px; }
  .cockpit-dashboard .kpi-card p { display: none; }
}

@container cockpit-widget (min-width: 340px) {
  .cockpit-dashboard .kpi-card { grid-template-columns: 40px minmax(0, 1fr); align-content: center; }
  .cockpit-dashboard .kpi-card > div { max-width: 34rem; }
}

@container cockpit-widget (max-width: 340px) {
  .cockpit-dashboard .cockpit-queue-card { min-height: 112px; padding-inline: 9px; }
  .cockpit-dashboard .cockpit-queue-card__requester .avatar { display: none; }
  .cockpit-dashboard .cockpit-queue-card .ticket-status-pill { max-width: 54%; }
  .cockpit-dashboard .cockpit-queue-card__meta time { width: 100%; margin-left: 0; }
}

@container cockpit-widget (min-width: 520px) {
  .cockpit-dashboard .cockpit-queue-card { min-height: 92px; }
  .cockpit-dashboard .cockpit-queue-card__title { -webkit-line-clamp: 1; }
}

@container cockpit-widget (max-width: 560px) {
  .cockpit-dashboard .ticket-header { align-items: flex-start; flex-direction: column; gap: var(--space-2); }
  .cockpit-dashboard .ticket-header h1 { white-space: normal; }
  .cockpit-dashboard .header-actions { width: 100%; justify-content: flex-end; }
  .cockpit-dashboard .message header { align-items: flex-start; flex-direction: column; gap: 2px; }
  .cockpit-dashboard .message header span { justify-content: flex-start; margin-left: 0; text-align: left; }
  .cockpit-dashboard .attachment-list { grid-template-columns: 1fr; }
  .cockpit-dashboard .composer-actions { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .cockpit-dashboard .composer-actions [data-composer-status] { grid-column: 1 / -1; grid-row: 1; white-space: normal; }
  .cockpit-dashboard .attachment-picker { grid-column: 1; grid-row: 2; }
  .cockpit-dashboard .composer-submit { grid-column: 2; grid-row: 2; }
  .cockpit-dashboard .status-transition-form { grid-template-columns: 1fr; align-items: stretch; }
  .cockpit-dashboard .status-transition-submit { width: 100%; justify-content: center; }
}


@container cockpit-widget (max-width: 360px) {
  .cockpit-dashboard .attachment-picker-label { max-width: 8.5rem; }
  .cockpit-dashboard .message-composer { padding: var(--space-2); }
  .cockpit-dashboard .composer-kind { overflow-x: auto; }
}

@container cockpit-widget (min-width: 760px) {
  .cockpit-dashboard .ticket-description { max-height: 128px; }
  .cockpit-dashboard .conversation-stream { padding-inline: var(--space-4); }
  .cockpit-dashboard .message__content { max-width: 68rem; }
}

@container cockpit-widget (min-height: 640px) {
  .cockpit-dashboard .conversation-stream { padding-block: var(--space-4); }
}

@container cockpit-widget (max-height: 480px) {
  .cockpit-dashboard .ticket-header { min-height: 62px; padding-block: 7px; }
  .cockpit-dashboard .ticket-description { max-height: 68px; }
  .cockpit-dashboard .message-composer textarea { min-height: 48px; }
}

@container cockpit-widget (min-width: 520px) {
  .cockpit-dashboard .details-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); }
  .cockpit-dashboard .details-list > div { grid-template-columns: minmax(84px, .75fr) minmax(0, 1.25fr); }
}

@container cockpit-widget (min-width: 760px) {
  .cockpit-dashboard .details-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container cockpit-widget (max-width: 720px) {
  .cockpit-dashboard .lifecycle-stage-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
}

@container cockpit-widget (max-width: 420px) {
  .cockpit-dashboard .priority-content { grid-template-columns: 1fr; justify-items: center; }
  .cockpit-dashboard .priority-content ul { width: 100%; }
}

@container cockpit-widget (max-width: 360px) {
  .cockpit-dashboard .lifecycle-stage-grid { grid-template-columns: 1fr; }
  .cockpit-dashboard .lifecycle-stage-card { min-height: 96px; }
}

@container cockpit-widget (min-width: 760px) {
  .cockpit-dashboard .lifecycle-stage-grid { gap: var(--space-3); padding: var(--space-4); }
  .cockpit-dashboard .priority-content { gap: var(--space-6); padding: var(--space-4); }
  .cockpit-dashboard .donut { width: 112px; height: 112px; }
}

/* Assistant ticket */
.wizard-shell {
  background: var(--bg);
}
.wizard-shell .wizard-header,
.itsm-wizard > header {
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.wizard-progress-region,
.itsm-wizard-progress { background: var(--surface); }
.wizard-form,
.itsm-wizard form { background: var(--bg); }
.wizard-step,
.itsm-wizard fieldset { max-width: 1060px; width: 100%; margin-inline: auto; }
.choice-card,
.itsm-choice-grid label {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: none;
}
.choice-card:has(input:checked),
.itsm-choice-grid label:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.wizard-actions,
.itsm-wizard footer { border-top: 1px solid var(--line); background: var(--surface-soft); }

/* --------------------------------------------------------------------------
   ITSM
   -------------------------------------------------------------------------- */
.itsm-shell { min-height: 100%; background: var(--bg); }

.itsm-main { min-width: 0; display: grid; gap: var(--space-3); padding: var(--space-4); }
.itsm-connection { margin: 0; border-left: 4px solid var(--warning); border-radius: var(--r-sm); background: var(--warning-soft); color: var(--text); }
.itsm-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
.itsm-kpis article {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(145deg, var(--surface), var(--surface-soft));
  box-shadow: none;
}
.itsm-kpi-icon { width: 36px; height: 36px; display: grid !important; place-items: center; border: 1px solid currentColor; border-radius: var(--r-sm); background: var(--surface-2) !important; }
.itsm-kpi-icon.critical { color: var(--danger); }
.itsm-kpi-icon.incident { color: var(--info); }
.itsm-kpi-icon.problem { color: var(--brand); }
.itsm-kpi-icon.change { color: var(--success); }
.itsm-kpi-icon.warning { color: var(--warning); }
.itsm-kpis strong { font-size: var(--fs-xl); line-height: 1; font-variant-numeric: tabular-nums; }
.itsm-kpis article div span { color: var(--muted); white-space: normal; line-height: 1.3; }
.itsm-workspace { min-height: 560px; display: grid; grid-template-columns: minmax(310px, .8fr) minmax(390px, 1.1fr) minmax(300px, .72fr); gap: var(--space-2); }
.itsm-panel,
.itsm-conflicts { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: none; overflow: hidden; }
.itsm-panel > header,
.itsm-conflicts > header { min-height: 58px; padding: 9px var(--space-3); background: var(--surface-soft); }
.itsm-panel h2,
.itsm-conflicts h2 { font-size: var(--fs-base); }
.itsm-panel header input { min-width: 120px; background: var(--surface); }
.itsm-tabs { display: flex; padding: 0 var(--space-2); background: var(--surface-soft); }
.itsm-tabs button { flex: 1; min-height: 40px; }
.itsm-list,
.itsm-change-list { height: 450px; }
.itsm-list > button,
.itsm-change-list > button { min-height: 70px; padding: 9px var(--space-3); border-left: 3px solid transparent; }
.itsm-list > button:hover,
.itsm-change-list > button:hover { border-left-color: var(--brand); background: var(--surface-soft); }
.itsm-severity,
.itsm-risk { border-radius: var(--r-sm); background: var(--surface-2); }
.itsm-severity.sev1,
.itsm-risk.critical { border-color: var(--danger-strong); background: var(--danger-soft); color: var(--danger); }
.itsm-severity.sev2,
.itsm-risk.high { border-color: var(--warning-strong); background: var(--warning-soft); color: var(--warning); }
.itsm-severity.sev3,
.itsm-risk.medium { border-color: var(--info-strong); background: var(--info-soft); color: var(--info); }
.itsm-severity.sev4,
.itsm-risk.low { border-color: var(--success-strong); background: var(--success-soft); color: var(--success); }
.itsm-detail { background: linear-gradient(180deg, var(--surface), var(--surface-soft)); }
.itsm-detail-empty { min-height: 100%; }
.itsm-detail-content > header { background: var(--surface-soft); }
.itsm-detail-content dl { margin: 0; padding: var(--space-3); }
.itsm-detail-content dl > div { display: grid; grid-template-columns: minmax(100px, .8fr) minmax(0, 1.2fr); gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--line); }
.itsm-conflict-summary { min-height: 54px; }
.itsm-conflict-summary.has-conflicts { border-left: 4px solid var(--warning); background: var(--warning-soft); }
.itsm-conflict-summary.is-clear { border-left: 4px solid var(--success); background: var(--success-soft); }
.itsm-conflicts { margin: 0; }
.itsm-conflicts [data-itsm-conflicts] { display: grid; gap: 1px; background: var(--line); }
.itsm-conflicts [data-itsm-conflicts] > article { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3); background: var(--surface); }

/* --------------------------------------------------------------------------
   Routage, SLA et escalades
   -------------------------------------------------------------------------- */
.routing-shell { min-height: 100%; background: var(--bg); }

.routing-main { max-width: none; width: 100%; display: grid; gap: var(--space-3); margin: 0; padding: var(--space-4); }
.routing-feedback { margin: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm); }
.routing-feedback.error { border-left-color: var(--danger); background: var(--danger-soft); }
.routing-feedback.success { border-left-color: var(--success); background: var(--success-soft); }
.routing-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.routing-kpis article { min-height: 76px; align-content: center; padding: var(--space-3); background: var(--surface); }
.routing-kpis span { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.routing-kpis strong { color: var(--muted); letter-spacing: .05em; }
.routing-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: var(--space-3); margin: 0; }
.routing-grid.secondary-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.routing-panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.routing-panel > header { min-height: 58px; padding: 10px var(--space-4); background: var(--surface-soft); }
.routing-panel h1,
.routing-panel h2 { font-size: var(--fs-base); }
.routing-table-wrap { max-width: 100%; overflow: auto; }
.routing-table-wrap table { min-width: 790px; background: var(--surface); }
.routing-table-wrap th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); color: var(--muted); }
.routing-table-wrap tbody tr:hover { background: var(--surface-soft); }
.routing-table-wrap td a { color: var(--text); }
.routing-badge { border-radius: var(--r-sm); background: var(--surface-2); }
.priority-critical,
.state-breached { border-color: var(--danger-strong); background: var(--danger-soft); color: var(--danger); }
.priority-high,
.state-at_risk { border-color: var(--warning-strong); background: var(--warning-soft); color: var(--warning); }
.priority-medium { border-color: var(--info-strong); background: var(--info-soft); color: var(--info); }
.priority-low,
.state-active,
.state-met { border-color: var(--success-strong); background: var(--success-soft); color: var(--success); }
.summary-columns { background: var(--surface); }
.summary-row { padding: 9px 0; }
.wizard-panel { margin: 0; }
.wizard-panel form { min-height: 430px; }
.routing-step { max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--space-6); }
.step-index { border-color: var(--brand); border-radius: var(--r-sm); background: var(--brand-soft); color: var(--brand); font-weight: 800; }
.routing-form-grid label,
.compact-form label { color: var(--muted); }
.routing-form-grid input,
.routing-form-grid select,
.routing-form-grid textarea,
.compact-form input,
.compact-form select { border-color: var(--line-strong); border-radius: var(--r-ctrl); background: var(--surface); }
.routing-review div { border-left-color: var(--brand); border-radius: var(--r-sm); background: var(--surface-soft); }
.saved-views-panel { margin: 0; }
.compact-form { gap: var(--space-3); background: var(--surface); }
.operation-row { background: var(--surface); }
.mini-list > div,
.timeline-list > div { border-bottom-color: var(--line); }
.routing-network,
.routing-loading { top: 0; border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm); background: var(--surface-soft); }
.routing-network { border-left-color: var(--warning); }
.routing-loading { border-left-color: var(--info); }

/* --------------------------------------------------------------------------
   Statut public
   -------------------------------------------------------------------------- */
body:has(.status-page) { min-height: 100dvh; background: radial-gradient(circle at 15% 0, color-mix(in srgb, var(--brand) 14%, transparent), transparent 34%), var(--bg-deep); }
.status-page { width: min(1120px, 100%); min-height: 100dvh; margin: 0 auto; padding: max(var(--space-4), var(--safe-top)) max(var(--space-4), var(--safe-right)) max(var(--space-6), var(--safe-bottom)) max(var(--space-4), var(--safe-left)); color: var(--text); }
.status-header { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.status-brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text); font-size: var(--fs-lg); font-weight: 800; text-decoration: none; }
.status-brand img { width: 38px; height: 38px; object-fit: contain; }
.status-header nav { display: flex; gap: var(--space-2); }
.status-header nav a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); color: var(--muted); text-decoration: none; }
.status-header nav a:hover { border-color: var(--line); background: var(--surface); color: var(--text); }
.status-hero { display: grid; gap: var(--space-2); padding: var(--space-8) 0 var(--space-6); }
.status-hero h1 { margin: 0; font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; }
.status-hero p { max-width: 720px; margin: 0; color: var(--muted); font-size: var(--fs-md); line-height: 1.6; }
.status-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-4); margin: 0 0 var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r-sm); background: var(--surface); }
.status-summary.is-clear { border-left-color: var(--success); }
.status-summary.has-events { border-left-color: var(--warning); }
.status-summary-icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: var(--fs-xl); }
.status-summary.is-clear .status-summary-icon { color: var(--success); background: var(--success-soft); }
.status-summary.has-events .status-summary-icon { color: var(--warning); background: var(--warning-soft); }
.status-summary small { color: var(--muted); font-size: var(--fs-xs); font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.status-summary h2 { margin: 3px 0; font-size: var(--fs-xl); }
.status-summary p { margin: 0; color: var(--muted); }
.status-list { display: grid; gap: var(--space-3); }
.status-event,
.status-empty { padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-1); }
.status-event > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.status-event time { color: var(--muted); font-size: var(--fs-xs); }
.status-event h2 { margin: var(--space-4) 0 var(--space-2); font-size: var(--fs-lg); }
.status-event > p { margin: 0; color: var(--muted); line-height: 1.6; }
.status-event dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) 0 0; }
.status-event dl > div { padding: var(--space-3); border: 1px solid var(--line); background: var(--surface-soft); }
.status-event dt { color: var(--muted); font-size: var(--fs-xs); }
.status-event dd { margin: 5px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.status-empty { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: var(--space-2); text-align: center; }
.status-empty i { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--success); border-radius: 50%; background: var(--success-soft); color: var(--success); font-size: var(--fs-xl); }
.status-empty h2,
.status-empty p { margin: 0; }
.status-empty p { color: var(--muted); }
.status-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-xs); }
.status-footer a { color: var(--brand); font-weight: 750; text-decoration: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  .itsm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .itsm-workspace { grid-template-columns: minmax(300px, .85fr) minmax(400px, 1.15fr); }
  .itsm-detail { grid-column: 1 / -1; min-height: 260px; }
  .routing-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  
  
  .itsm-workspace,
  .routing-grid,
  .routing-grid.secondary-grid { grid-template-columns: 1fr; }
  .itsm-detail { grid-column: auto; }
  .routing-form-grid,
  .compact-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itsm-conflicts [data-itsm-conflicts] > article { grid-template-columns: 1fr; }
}

@media (max-width: 760px), (max-height: 520px) and (max-width: 960px) {
  
  
  
  
  
  
  

  .cockpit-dashboard > :is(.connection-banner,.workspace-alert,.state-surface) { margin-inline: 0; }
  .cockpit-dashboard .kpi-card { min-height: 0; border: 0; border-radius: 0; }
  .cockpit-dashboard .panel { border-inline: 0; border-radius: 0; }
  .cockpit-dashboard .queue-panel,
  .cockpit-dashboard .conversation-panel,
  .cockpit-dashboard .details-panel { min-height: 0; }
  .cockpit-dashboard .ticket-header { align-items: flex-start; flex-direction: column; }
  .cockpit-dashboard .ticket-header h1 { white-space: normal; }
  .cockpit-dashboard .header-actions { width: 100%; }
  .cockpit-dashboard .header-actions .button { flex: 1; }
  .cockpit-dashboard .details-list > div { grid-template-columns: 1fr; gap: 3px; }

  .itsm-main,
  .routing-main { padding: 0 0 max(var(--space-4), var(--safe-bottom)); gap: 0; }
  .itsm-kpis,
  .routing-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border-inline: 0; border-radius: 0; background: var(--line); }
  .itsm-kpis article,
  .routing-kpis article { min-height: 72px; border: 0; border-radius: 0; }
  .itsm-panel,
  .itsm-conflicts,
  .routing-panel { border-inline: 0; border-radius: 0; }
  .itsm-workspace,
  .routing-grid,
  .routing-grid.secondary-grid { gap: 0; }
  .itsm-list,
  .itsm-change-list { height: auto; max-height: 54dvh; }
  .itsm-detail { min-height: 70dvh; }
  .routing-form-grid,
  .compact-form,
  .summary-columns,
  .routing-review { grid-template-columns: 1fr; }
  .routing-step { padding: var(--space-4) max(var(--space-3), var(--safe-right)) 100px max(var(--space-3), var(--safe-left)); }
  .wizard-panel form { min-height: calc(var(--visual-viewport-height) - var(--topbar-h)); }
  .wizard-panel footer { position: sticky; bottom: 0; z-index: 2; background: var(--surface-soft); padding-bottom: max(var(--space-3), var(--safe-bottom)); }
  .compact-form { padding-inline: max(var(--space-3), var(--safe-left)); }
  .operation-row { align-items: stretch; flex-direction: column; }
  .operation-row .button { width: 100%; }

  .status-page { padding-inline: 0; }
  .status-header,
  .status-hero,
  .status-summary,
  .status-list > *,
  .status-footer { padding-inline: max(var(--space-3), var(--safe-left)); }
  .status-header { padding-top: max(var(--space-2), var(--safe-top)); }
  .status-header nav { display: none; }
  .status-hero { padding-block: var(--space-6) var(--space-4); }
  .status-summary { margin: 0 0 var(--space-3); border-inline: 0; border-radius: 0; }
  .status-event,
  .status-empty { border-inline: 0; border-radius: 0; box-shadow: none; }
  .status-event dl { grid-template-columns: 1fr; }
  .status-footer { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .cockpit-dashboard *,
  .itsm-shell *,
  .routing-shell *,
  .status-page * { scroll-behavior: auto !important; }
}

@media (forced-colors: active) {
  .cockpit-dashboard .cockpit-queue-card.is-current-ticket,
  .lifecycle-stage-card,
  .routing-feedback,
  .itsm-conflict-summary { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Visualiseur sécurisé des pièces jointes du cockpit */
.attachment-preview-dialog {
  width: min(980px, calc(100vw - 32px));
  height: min(780px, calc(100dvh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-3);
}
.attachment-preview-dialog::backdrop { background: rgb(15 23 42 / .62); backdrop-filter: blur(3px); }
.attachment-preview-dialog__shell { min-width: 0; min-height: 0; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.attachment-preview-dialog__shell > header,
.attachment-preview-dialog__shell > footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface-soft); }
.attachment-preview-dialog__shell > header { border-bottom: 1px solid var(--line); }
.attachment-preview-dialog__shell > footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.attachment-preview-dialog__shell h2 { margin: 2px 0 0; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.attachment-preview-dialog__shell header p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.attachment-preview-dialog__body { min-width: 0; min-height: 0; display: grid; place-items: center; padding: var(--space-3); overflow: auto; background: var(--bg); }
.attachment-preview-dialog__body > img { max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--line); background: var(--surface); }
.attachment-preview-dialog__body > audio { width: min(680px, 100%); }
.attachment-preview-dialog__body > iframe { width: 100%; height: 100%; min-height: 420px; border: 1px solid var(--line); background: white; }
.attachment-preview-dialog__body > pre { width: 100%; min-height: 100%; margin: 0; padding: var(--space-4); overflow: auto; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: 500 var(--fs-sm)/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.attachment-preview-loading,
.attachment-preview-unavailable { max-width: 560px; display: grid; justify-items: center; gap: var(--space-3); margin: auto; color: var(--muted); text-align: center; }
.attachment-preview-unavailable > .ti { color: var(--brand); font-size: 42px; }

@media (max-width: 719px) {
  .attachment-preview-dialog { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .attachment-preview-dialog__shell > header,
  .attachment-preview-dialog__shell > footer { padding: var(--space-3); }
  .attachment-preview-dialog__body { padding: var(--space-2); }
  .attachment-preview-dialog__body > iframe { min-height: 100%; }
}

@media (forced-colors: active) {
  .cockpit-dashboard .donut { border: 2px solid CanvasText; background: Canvas; }
  .cockpit-dashboard .donut::after { border: 2px solid CanvasText; background: Canvas; }
  .attachment-preview-dialog { border: 2px solid CanvasText; }
}

.cockpit-dashboard .initial-attachments{display:grid;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--brand) 4%,var(--surface-soft))}.cockpit-dashboard .initial-attachments__heading{display:flex;align-items:center;gap:7px;color:var(--text);font-size:var(--fs-xs)}.cockpit-dashboard .initial-attachments__heading i{color:var(--brand)}.cockpit-dashboard .initial-attachments__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}.cockpit-dashboard .initial-attachments .attachment-card.is-audio{grid-column:1/-1}.cockpit-dashboard .attachment-card.is-audio .attachment-card__preview{height:64px}.cockpit-dashboard .attachment-card__body>.mt-audio-player{margin-top:5px}@media(max-width:719px){.cockpit-dashboard .initial-attachments__list{grid-template-columns:1fr}}