/* shared/pages/support.css — feuille de support.html, sortie de son bloc \3c style> le 17/10/2026 (lot 8 du dossier 1 : CSP sans
   style en ligne). Chargée par une balise <link> à la place exacte de l’ancien bloc : même ordre dans la cascade. */
.support-page { max-width: 720px; margin: 0 auto; padding: var(--palette-espacement-cabinet-conversation) var(--palette-espacement-cabinet-conversation-10) var(--palette-espacement-support); }
.support-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation-2); margin: 0 0 var(--palette-espacement-cabinet-conversation-10); }
.support-head h1 { margin: 0 0 var(--palette-espacement-cabinet-2); font-size: var(--palette-typographie-conversation-5); letter-spacing: var(--palette-typographie-layout-2); color: var(--ink); }
.support-head .sub { font-size: var(--palette-typographie-cabinet-conversation-3); color: var(--muted); max-width: 460px; line-height: 1.5; }

/* ── Liste des tickets ── */
.tk-list { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-11); }
.tk-card { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-7); text-align: left; width: 100%;
           background: var(--surface); border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet-conversation-3);
           padding: var(--palette-espacement-composants-6) var(--palette-espacement-composants-7); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.tk-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.tk-card .tk-body { flex: 1; min-width: 0; }
.tk-subject { font-weight: 600; color: var(--ink); font-size: var(--palette-typographie-composants-14); margin: 0 0 var(--palette-espacement-composants-5);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-preview { font-size: var(--palette-typographie-components-2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--palette-espacement-cabinet-conversation-9); flex: 0 0 auto; }
.tk-date { font-size: var(--palette-typographie-composants-3); color: var(--muted-2, var(--palette-texte-secondaire-conversation)); }
.tk-dot { width: 8px; height: 8px; border-radius: var(--palette-rayon-composants-2); background: var(--adaptation-fond-action-accent, var(--accent)); flex: 0 0 auto; }

/* ── Formulaire nouvelle demande ── */
.support-form { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-conversation-5); }
.support-form label { font-size: var(--palette-typographie-cabinet-conversation-3); font-weight: 600; color: var(--ink); display: block; margin-bottom: var(--palette-espacement-cabinet-conversation-3); }
.btn-row { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-6); flex-wrap: wrap; }
.back-btn { margin-bottom: var(--palette-espacement-cabinet-conversation-5); }

/* ── Fil de discussion (design épuré) ── */
.thread-top { display: flex; align-items: center; justify-content: space-between; gap: var(--palette-espacement-cabinet-conversation-7); margin-bottom: var(--palette-espacement-cabinet-conversation-8);
              padding-bottom: var(--palette-espacement-cabinet-conversation-5); border-bottom: 1px solid var(--line); }
.thread-top h2 { margin: 0; font-size: var(--palette-typographie-composants-9); letter-spacing: var(--palette-typographie-layout-4); color: var(--ink); }
.thread { display: flex; flex-direction: column; gap: var(--palette-espacement-cabinet-2); margin-bottom: var(--palette-espacement-cabinet-conversation-8); }
.msg-row { display: flex; flex-direction: column; max-width: 76%; }
.msg-row.me { align-self: flex-end; align-items: flex-end; }
.msg-row.them { align-self: flex-start; align-items: flex-start; }
.msg-who { font-size: var(--palette-typographie-composants-3); font-weight: 600; color: var(--muted-2, var(--palette-texte-secondaire-conversation)); margin: var(--palette-espacement-cabinet-conversation-6) var(--palette-espacement-composants-5) var(--palette-espacement-components-4); }
.msg-row.me .msg-who { display: none; } /* c'est vous : l'alignement suffit */
.bubble { padding: var(--palette-espacement-cabinet-conversation-4) var(--palette-espacement-composants-6); border-radius: var(--palette-rayon-invitation-3); font-size: var(--palette-typographie-cabinet-conversation-2); line-height: 1.45; word-wrap: break-word;
          overflow-wrap: anywhere; }
.msg-row.them .bubble { background: var(--surface-2); color: var(--ink); border-bottom-left-radius: var(--palette-rayon-conversation-2); }
.msg-row.me .bubble { background: var(--adaptation-fond-action-accent, var(--accent)); color: var(--palette-texte-inverse-components); border-bottom-right-radius: var(--palette-rayon-conversation-2); }
.bubble p { margin: 0 0 var(--palette-espacement-cabinet-conversation-3); } .bubble p:last-child { margin-bottom: 0; }
.bubble a { color: inherit; text-decoration: underline; }
.bubble :is(ul, ol) { margin: var(--palette-espacement-support-2) 0; padding-inline-start: var(--palette-espacement-support-3); list-style-position: outside; }
.bubble ul { list-style-type: disc; } .bubble ol { list-style-type: decimal; }
.bubble li + li { margin-top: var(--palette-espacement-support-4); } .bubble li > p { margin: 0; }
.bubble > :first-child { margin-top: 0; } .bubble > :last-child { margin-bottom: 0; }
.msg-time { font-size: var(--palette-typographie-consultation-5); color: var(--muted-2, var(--palette-texte-secondaire-espace-patient-2)); margin: var(--palette-espacement-components-4) var(--palette-espacement-cabinet-2) 0; }

/* Pièces jointes dans une bulle */
.att-wrap { display: flex; flex-wrap: wrap; gap: var(--palette-espacement-cabinet-conversation-3); }
.att-img { display: block; border-radius: var(--palette-rayon-cabinet-conversation-4); overflow: hidden; max-width: 180px; }
.att-img img { display: block; width: 100%; height: auto; }
.att-file { display: inline-flex; align-items: center; gap: var(--palette-espacement-components); padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-components-2); border-radius: var(--palette-rayon-cabinet-conversation-4);
            font-size: var(--palette-typographie-components-2); text-decoration: none; max-width: 220px; }
.msg-row.them .att-file { background: var(--palette-fond-inverse-matching); color: var(--ink); }
.msg-row.me .att-file { background: var(--palette-surface-demarrer-6); color: var(--palette-texte-inverse-components); }
.att-file .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Composer avec éditeur minimal (B/I) ── */
.composer { border: 1px solid var(--line); border-radius: var(--palette-rayon-cabinet); background: var(--surface); overflow: hidden; }
.composer-toolbar { display: flex; gap: var(--palette-espacement-cabinet-2); padding: var(--palette-espacement-cabinet-conversation-3) var(--palette-espacement-cabinet-conversation-11); border-bottom: 1px solid var(--line); }
.composer-toolbar button { width: 28px; height: 26px; border: 0; background: transparent; border-radius: var(--palette-rayon-conversation);
                           font-size: var(--palette-typographie-cabinet-conversation-3); cursor: pointer; color: var(--muted); }
.composer-toolbar button[data-cmd="bold"] { font-weight: 800; }
.composer-toolbar button[data-cmd="italic"] { font-style: italic; font-family: var(--palette-police-editoriale-espace-patient); }
.composer-toolbar button:hover { background: var(--surface-2); color: var(--ink); }
.composer-input { min-height: 44px; max-height: 160px; overflow-y: auto; padding: var(--palette-espacement-components-2) var(--palette-espacement-cabinet-conversation-5); font-size: var(--palette-typographie-cabinet-conversation-2);
                  line-height: 1.45; outline: none; color: var(--ink); }
.composer-input:empty:before { content: attr(data-placeholder); color: var(--muted-2, var(--palette-texte-secondaire-espace-patient-2)); }
.composer-bar { display: flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-11); padding: var(--palette-espacement-cabinet-conversation-11) var(--palette-espacement-cabinet-conversation-6); border-top: 1px solid var(--line); }
.composer-bar .tool-btn { background: var(--surface-2); border: 0; border-radius: var(--palette-rayon-cabinet-conversation-2); width: 34px; height: 34px;
                          cursor: pointer; font-size: var(--palette-typographie-cabinet-conversation-5); flex: 0 0 auto; color: var(--muted); }
.composer-bar .tool-btn:hover { color: var(--ink); }
.composer-bar .spacer { flex: 1; }
.att-chips { display: flex; flex-wrap: wrap; gap: var(--palette-espacement-cabinet-conversation-3); padding: 0 var(--palette-espacement-cabinet-conversation-7) var(--palette-espacement-cabinet-conversation-11); }
.att-chip { display: inline-flex; align-items: center; gap: var(--palette-espacement-cabinet-conversation-3); background: var(--accent-softer); color: var(--accent-ink);
            border-radius: var(--palette-rayon-cabinet-2); padding: var(--palette-espacement-cabinet-2) var(--palette-espacement-cabinet-conversation-11); font-size: var(--palette-typographie-cabinet-conversation-4); max-width: 200px; }
.att-chip .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-chip button { border: 0; background: transparent; cursor: pointer; color: var(--accent-ink); font-size: var(--palette-typographie-cabinet-conversation-2); line-height: 1; padding: 0; }

.resolved-note { font-size: var(--palette-typographie-components-2); color: var(--muted); text-align: center; margin: var(--palette-espacement-cabinet-conversation-6) 0 0; }
.support-error { color: var(--danger); font-size: var(--palette-typographie-cabinet-conversation-3); margin-top: var(--palette-espacement-cabinet-conversation-11); }
.center-load { text-align: center; color: var(--muted); padding: var(--palette-espacement-components-3) 0; }

/* Mobile : le fil remplit l'écran et le composer se cale en bas (au-dessus de
   la tab bar) — fini le grand vide entre la zone de texte et le bas.
   ⚠️ `:not([hidden])` OBLIGATOIRE : sans lui, `display:flex` écrase l'attribut
   hidden → la vue détail resterait visible après « Retour ». */
@media (max-width: 767px) {
  .support-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; padding-bottom: var(--palette-espacement-app-shell); }
  #threadView:not([hidden]) { flex: 1; display: flex; flex-direction: column; }
  #thread { flex: 1 1 auto; justify-content: flex-end; }
}