/* ============================================================================
 * SuperAndy — onglet « Support » (messagerie à tickets avec les tenants).
 *
 * Un poste de travail PLEINE HAUTEUR : la boîte à gauche, le fil à droite,
 * chacun avec son propre défilement. La page elle-même ne défile pas — l'en-tête
 * du fil, la barre de triage et le composer restent à l'écran pendant qu'on
 * remonte la conversation, ce qui est tout l'intérêt d'une console de support.
 *
 * Sous 1180 px de console (fenêtre étroite, écran secondaire), les volets
 * s'empilent, la hauteur redevient naturelle et la page reprend son défilement :
 * la liste reste utilisable et le fil passe dessous plutôt que d'être compressé.
 *
 * N'utilise QUE les tokens de assets/styles.css (--panel, --panel2, --border,
 * --text, --soft, --accent, --ok, --ko, --warn, --radius) : le thème clair de la
 * console (prefers-color-scheme) suit sans une seule règle en plus.
 * ========================================================================== */

.sup-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* .main porte 24px de padding vertical : la page occupe exactement ce qui
     reste de la fenêtre, et c'est chaque volet qui défile. */
  height: calc(100vh - 48px);
  min-height: 0;
}

.sup-page .page-h { margin-bottom: 0; flex: none; }

/* ---- Compteurs de boîte (décrivent la boîte, pas la page filtrée) ---- */

.sup-counters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.sup-counter {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; color: var(--soft);
}
.sup-counter b { font-size: 13px; font-weight: 800; color: var(--text); }
.sup-counter--unread b { color: var(--accent); }
.sup-counter--open b { color: var(--warn); }

/* ---- Boîtes ---- */

.sup-boxTabs {
  display: flex; gap: 6px; flex: none;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px; width: fit-content; max-width: 100%;
}

.sup-boxTab {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: 0; border-radius: 999px;
  color: var(--soft); font-weight: 650; font-size: 13px; padding: 7px 16px;
  white-space: nowrap;
}
.sup-boxTab:hover { color: var(--text); }
.sup-boxTab.is-active { background: var(--accent); color: #fff; }

.sup-boxBadge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--panel2); color: var(--soft);
  font-size: 11px; font-weight: 800; display: grid; place-items: center;
}
.sup-boxTab.is-active .sup-boxBadge { background: rgba(255, 255, 255, .22); color: #fff; }

/* ---- Coque deux volets ---- */

.sup-shell {
  display: grid;
  grid-template-columns: minmax(320px, 400px) 1fr;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 0;
}

.sup-shell > .card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 14px 14px 0;
}

/* La liste et le fil portent leur propre défilement (jamais la page). */
.sup-list .scroll,
.sup-list > div:last-child .scroll {
  max-height: none;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 4px 14px 0;
}

.sup-list > div:last-child { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.sup-list .card-h { flex: none; }

@media (max-width: 1180px) {
  .sup-page { height: auto; }
  .sup-shell { grid-template-columns: 1fr; }
  .sup-shell > .card { max-height: 70vh; }
}

/* ---- Filtres ---- */

.sup-filters {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end;
  margin-bottom: 12px; flex: none;
}

.sup-ctl { display: inline-flex; flex-direction: column; gap: 3px; min-width: 0; }
.sup-ctl > span { font-size: 10.5px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .04em; }
.sup-ctl .std-select { padding: 6px 8px; font-size: 12.5px; }

.sup-toggle {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  color: var(--soft); font-weight: 700; font-size: 12px; padding: 7px 14px;
}
.sup-toggle:hover { border-color: var(--accent); }
.sup-toggle.is-on { background: rgba(59, 130, 246, .16); border-color: var(--accent); color: var(--accent); }

/* ---- Pastilles d'état ----
 *
 * Un point coloré précède toujours le libellé : la couleur seule ne porte
 * jamais l'information. Côté Andy, ce qui appelle SON action est coloré
 * (reçue, prise en charge) ; ce qui attend le client s'efface en gris.
*/

.sup-pill {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border-radius: 999px; padding: 3px 10px;
  font-size: 11px; font-weight: 700; white-space: nowrap;
}
.sup-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.sup-pill--new      { background: rgba(245, 158, 11, .16); color: var(--warn); }
.sup-pill--open     { background: rgba(59, 130, 246, .16); color: var(--accent); }
.sup-pill--waiting  { background: var(--panel2); color: var(--soft); }
.sup-pill--ok       { background: rgba(34, 197, 94, .16); color: var(--ok); }
.sup-pill--closed   { background: var(--panel2); color: var(--soft); }
.sup-pill--high     { background: rgba(245, 158, 11, .14); color: var(--warn); }
.sup-pill--urgent   { background: rgba(239, 68, 68, .16); color: var(--ko); }

.sup-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; color: var(--soft);
  border: 1px dashed var(--border); border-radius: 999px; padding: 2px 8px;
}

/* ---- Ligne de demande ---- */

.sup-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 10px 11px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: 11px;
  background: var(--panel); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.sup-row:hover { border-color: var(--accent); }
.sup-row.is-active { border-color: var(--accent); background: var(--panel2); }

.sup-rowAvatar { position: relative; flex: none; }

/* Badge de non-lus : posé sur le monogramme, calibré pour n'en mordre que le
   coin — plus large, il recouvrait les initiales du client. */
.sup-rowBadge {
  position: absolute; top: -6px; right: -6px;
  box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; border: 2px solid var(--panel);
  background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  display: grid; place-items: center;
}

.sup-rowBody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }

.sup-rowTop { display: flex; align-items: baseline; gap: 10px; min-width: 0; }

/* L'objet tient sur UNE ligne : des lignes de hauteur constante se balaient à
   l'œil. Le sujet complet reste dans `title` et dans l'en-tête du fil. */
.sup-rowSubject {
  flex: 1 1 auto; min-width: 0; font-weight: 650; font-size: 13.5px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sup-row.is-unread .sup-rowSubject { font-weight: 800; }

.sup-rowDate { flex: none; font-size: 11.5px; color: var(--soft); white-space: nowrap; }

.sup-rowTags { display: flex; align-items: center; gap: 6px; min-width: 0; }

.sup-rowMeta,
.sup-rowExcerpt {
  font-size: 11.5px; color: var(--soft); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sup-rowMeta { flex: 1 1 auto; }
.sup-rowExcerpt b { color: var(--text); font-weight: 650; }

/* ---- Fil de discussion ---- */

.sup-detail { padding: 0 !important; }

.sup-thread { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }

.sup-threadHead { flex: none; padding: 16px 18px 12px; border-bottom: 1px solid var(--border); }

.sup-threadTitle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sup-threadTitle h3 { margin: 0; font-size: 16px; flex: 1 1 240px; min-width: 0; }

.sup-threadSub {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px; color: var(--soft); font-size: 12.5px;
}
.sup-threadSub b { color: var(--text); font-weight: 650; }

.sup-assignee {
  background: rgba(59, 130, 246, .14); color: var(--accent);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700;
}

.sup-toolbar {
  flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px;
  padding: 10px 18px; border-bottom: 1px solid var(--border); background: var(--panel2);
}
.sup-toolbar .sp { flex: 1 1 auto; }

.sup-msgs {
  flex: 1 1 0; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 18px;
}

/* Séparateur de journée : un fil de support s'étale sur des semaines. */
.sup-day {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 0;
  color: var(--soft); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.sup-day::before, .sup-day::after { content: ""; flex: 1 1 0; height: 1px; background: var(--border); }

/* Prise de parole : un auteur, une plage de dix minutes, N bulles. */
.sup-group { display: flex; align-items: flex-end; gap: 9px; max-width: 82%; min-width: 0; }
.sup-group--tenant { align-self: flex-start; }
.sup-group--andy { align-self: flex-end; flex-direction: row-reverse; }

.sup-groupAvatar {
  flex: none; width: 26px; height: 26px; margin-bottom: 2px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--panel2); color: var(--soft); font-size: 10px; font-weight: 800;
}
.sup-group--andy .sup-groupAvatar { background: rgba(59, 130, 246, .18); }

.sup-groupBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sup-group--andy .sup-groupBody { align-items: flex-end; }

.sup-msgHead { display: flex; align-items: baseline; gap: 8px; padding: 0 4px; font-size: 11px; color: var(--soft); }
.sup-msgAuthor { font-weight: 700; }

.sup-msg {
  border: 1px solid var(--border); border-radius: 14px; padding: 9px 12px;
  background: var(--panel2); min-width: 0;
}
.sup-msgBody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; }

/* Nos messages à droite, ceux du client à gauche : la lecture d'un fil de
   support se fait au coup d'œil, pas en lisant les noms. */
.sup-group--andy .sup-msg { background: rgba(59, 130, 246, .13); border-color: rgba(59, 130, 246, .32); }
.sup-group--andy .sup-msg:last-child { border-bottom-right-radius: 5px; }
.sup-group--tenant .sup-msg:last-child { border-bottom-left-radius: 5px; }

.sup-system {
  align-self: center; display: inline-flex; align-items: center; gap: 8px; max-width: 100%;
  background: var(--panel2); border-radius: 999px; padding: 3px 12px;
  color: var(--soft); font-size: 11.5px; text-align: center;
}
.sup-systemTime { opacity: .7; }

/* ---- Pièces jointes ---- */

.sup-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.sup-file {
  display: inline-flex; align-items: center; gap: 8px; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 5px 10px 5px 5px; font-size: 12.5px; color: var(--text); max-width: 100%; min-width: 0;
}
.sup-file:hover { border-color: var(--accent); }

.sup-fileKind {
  flex: none; padding: 4px 6px; border-radius: 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  background: rgba(59, 130, 246, .16); color: var(--accent);
}
.sup-file--img .sup-fileKind { background: rgba(139, 92, 246, .18); color: #a78bfa; }
.sup-file--zip .sup-fileKind { background: rgba(245, 158, 11, .16); color: var(--warn); }

.sup-fileText { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sup-fileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-fileSize { color: var(--soft); font-size: 11px; }

/* ---- Composer ---- */

/*
 * Une seule boîte : la zone de saisie et sa barre partagent la même bordure et
 * le même anneau de focus. Auparavant, deux bandes empilées (champ puis ligne
 * d'actions) mangeaient de la hauteur de conversation pour rien.
*/
.sup-composer {
  flex: none; margin: 0 18px 18px;
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sup-composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }

.sup-composer textarea {
  background: transparent; border: 0; color: var(--text);
  border-radius: 14px 14px 0 0; padding: 11px 13px 4px;
  min-height: 76px; max-height: 220px; resize: vertical; font: inherit; outline: none;
}

.sup-composerBar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px 10px; }
.sup-composerBar .sp { flex: 1 1 auto; }
.sup-composerHint { color: var(--soft); font-size: 12px; }

.sup-attachBtn {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  color: var(--text); font-size: 12.5px; font-weight: 650; padding: 6px 13px;
}
.sup-attachBtn:hover { border-color: var(--accent); }

.sup-send {
  background: var(--accent); border: 1px solid var(--accent); border-radius: 999px;
  color: #fff; font-size: 12.5px; font-weight: 700; padding: 7px 16px;
}
.sup-send:hover:not(:disabled) { background: var(--accent2); }
.sup-send:disabled { opacity: .5; }

.sup-attachments { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 10px 0; }

.sup-attachment {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
  padding: 4px 6px 4px 5px; font-size: 12.5px; max-width: 100%;
}
.sup-attachment button {
  background: transparent; border: 0; color: var(--soft); font-size: 15px; line-height: 1; padding: 0 4px;
}
.sup-attachment button:hover { color: var(--ko); }

/* ---- États ---- */

.sup-empty {
  margin: auto; padding: 40px 24px; text-align: center; color: var(--soft);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.sup-emptyIcon {
  width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center;
  background: var(--panel2); font-size: 24px; margin-bottom: 6px;
}
.sup-emptyTitle { color: var(--text); font-size: 15px; font-weight: 700; }
.sup-emptyText { font-size: 13px; max-width: 320px; line-height: 1.5; }

.sup-banner {
  flex: none;
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .4);
  color: var(--warn); border-radius: 10px; padding: 10px 14px; font-size: 13px;
}