/* ═══════════════════════════════════════════════════════════════════════════
   B2 tâche 013 — R17/AC17.4. Contact flow recruteur ↔ talent : sollicitations
   (index + détail) et fils de mise en relation (thread). Design system Tastellers
   (dorés / crème / vert), aligné sur les mockups application_received /
   propose_position / messages. Aucun CSS inline dans les vues (cf. règle projet).
   Tout est scopé sous .cf-scope.
   ═══════════════════════════════════════════════════════════════════════════ */
.cf-scope {
  /* Les dorés et le vert viennent de design_tokens.css. Les alias locaux
     --gold-700 / --gold-800 portaient des valeurs DÉCALÉES d'un cran par rapport
     aux jetons globaux du même nom : ils masquaient le jeton. Supprimés, les
     usages pointent maintenant --gold-deep et --gold-700. */
  --cream: var(--gold-50); --cream-line: #EFE2BC;
  --red: #B0432F; --red-50: #FBF4F1; --red-200: #F0D9D1;
  --ink: #1A1A1A; --n700: #4A4640; --n500: #8A857A; --n400: #B4AFA4;
  --n200: #E5E2DC; --n100: #F4F2EE; --n50: #FAF9F6;
  --gold-grad: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-500) 55%, var(--gold-600) 100%);
  --gm: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sh-sm: 0 1px 2px rgba(44,44,44,.05); --sh-md: 0 4px 14px rgba(44,44,44,.07);
  color: var(--ink);
}
.cf-scope * { box-sizing: border-box; }
.cf-serif { font-family: 'Playfair Display', Georgia, serif; }

/* ── Header ── */
.cf-head { margin-bottom: 22px; }
.cf-crumb { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--gold-deep); margin-bottom: 14px; }
.cf-crumb:hover { color: var(--gold-700); }
.cf-title { font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 0; }
.cf-subtitle { font-size: 13.5px; color: var(--n500); margin-top: 6px; line-height: 1.5; max-width: 620px; }
.cf-titlerow { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ── Filters ── */
.cf-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 20px; }
.cf-filter { padding: 8px 16px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; border: 1px solid var(--n200); background: #fff; color: var(--n700); }
.cf-filter:hover { border-color: var(--gold-primary); color: var(--gold-deep); }
.cf-filter.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.cf-count-pill { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; color: var(--on-gold); background: var(--gold-grad); }

/* ── Status badges ── */
.cf-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; border: 1px solid transparent; }
.cf-badge.is-pending { color: var(--gold-deep); background: var(--cream); border-color: var(--cream-line); }
.cf-badge.is-accepted { color: var(--green); background: var(--green-50); border-color: var(--green-200); }
.cf-badge.is-declined { color: var(--n700); background: var(--n100); border-color: var(--n200); }

/* ── List ── */
.cf-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; margin: 0; }
.cf-row { display: flex; align-items: center; gap: 15px; padding: 16px 18px; background: #fff; border: 1px solid var(--n200); border-radius: var(--r-lg); box-shadow: var(--sh-sm); transition: border-color .15s, box-shadow .15s; }
.cf-row:hover { border-color: var(--gold-primary); box-shadow: var(--sh-md); }
.cf-ava { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: var(--on-gold); flex-shrink: 0; background: var(--gold-grad); border: 2px solid var(--n100); }
.cf-row-main { flex: 1 1 auto; min-width: 0; }
.cf-row-name { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; }
.cf-row-sub { font-size: 12.5px; color: var(--n500); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-row-meta { text-align: right; flex-shrink: 0; }
.cf-row-date { font-size: 12px; color: var(--n500); }
.cf-row-cost { font-size: 11px; font-weight: 700; color: var(--gold-deep); margin-top: 3px; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-500); flex-shrink: 0; }

/* ── Empty state ── */
.cf-empty { border: 1px dashed var(--n200); border-radius: 18px; padding: 48px 24px; text-align: center; color: var(--n500); font-size: 14px; }

/* ── Detail / contact-flow panels ── */
.cf-grid { display: grid; grid-template-columns: 1fr 340px; gap: 22px; align-items: start; }
@media (max-width: 900px) { .cf-grid { grid-template-columns: 1fr; } }
.cf-card { background: #fff; border: 1px solid var(--n200); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--sh-sm); margin-bottom: 18px; }
.cf-card-label { font-family: var(--gm); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; }
.cf-msg { font-size: 14px; line-height: 1.65; color: var(--n700); }
.cf-msg-quote { border-left: 3px solid var(--gold-primary); padding-left: 16px; }
.cf-note { font-size: 12.5px; color: var(--n500); line-height: 1.5; }

/* candidate/recruiter identity card */
.cf-id { display: flex; align-items: flex-start; gap: 15px; }
.cf-id-ava { width: 58px; height: 58px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: var(--on-gold); background: var(--gold-grad); flex-shrink: 0; position: relative; }
.cf-id-name { font-family: 'Playfair Display', Georgia, serif; font-size: 20px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cf-id-role { font-size: 13px; color: var(--gold-deep); font-weight: 600; margin-top: 2px; }
.cf-id-head { font-size: 12.5px; color: var(--n500); margin-top: 5px; line-height: 1.5; }
/* #3279 — pastille de Maison ANONYME (avant acceptation) : le dégradé or de
   l'identité révélée laisse place au gris des jetons, et le cadenas SVG
   remplace les initiales. Scopé sous .cf-scope : `.masked` est une classe
   courte que d'autres feuilles produit redéclarent. */
.cf-scope .cf-ava.masked,
.cf-scope .cf-id-ava.masked { background: var(--cream); border: 1px solid var(--cream-line); color: var(--n500); }
.cf-scope .cf-ava.masked svg,
.cf-scope .cf-id-ava.masked svg { width: 18px; height: 18px; }
.cf-scope .cf-id-ava.masked svg { width: 22px; height: 22px; }

.cf-masked { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; padding: 10px 12px; background: var(--cream); border: 1px solid var(--cream-line); border-radius: 10px; font-size: 12px; color: var(--n700); line-height: 1.5; }
/* #3279 — la note de masquage réutilise l'icône SVG de la messagerie
   (`messagerie_icons[:lock]`), qui ne porte qu'un viewBox : sans taille
   explicite, un SVG inline retombe sur le défaut 300x150 et poussait le texte
   à 408 px de bord droit sur un écran de 390. Le gabarit est posé ici plutôt
   que répété en attributs dans chaque vue. */
.cf-masked svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--gold-500); margin-top: 1px; }
.cf-masked p { margin: 0; min-width: 0; }

/* stepper */
.cf-stepper { display: flex; align-items: center; gap: 0; margin: 4px 0 20px; overflow-x: auto; padding: 14px 16px; background: #fff; border: 1px solid var(--n200); border-radius: 14px; box-shadow: var(--sh-sm); }
.cf-step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.cf-step-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--n100); color: var(--n400); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.cf-step.is-done .cf-step-dot { background: var(--gold-grad); color: var(--on-gold); }
.cf-step.is-current .cf-step-dot { box-shadow: 0 0 0 4px rgba(196,165,89,.16); }
.cf-step-name { font-size: 12.5px; font-weight: 600; color: var(--n500); white-space: nowrap; }
.cf-step.is-done .cf-step-name, .cf-step.is-current .cf-step-name { color: var(--ink); }
.cf-step-bar { flex: 1 1 22px; min-width: 22px; height: 2px; background: var(--n200); margin: 0 10px; }
.cf-step-bar.is-done { background: var(--gold-500); }

/* action panel (sidebar) */
.cf-panel { background: #fff; border: 1px solid var(--n200); border-radius: var(--r-lg); padding: 18px; box-shadow: var(--sh-sm); }
.cf-panel-label { font-family: var(--gm); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--n500); margin-bottom: 12px; }
.cf-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; border-radius: var(--r-pill); font-size: 13.5px; font-weight: 700; margin-bottom: 10px; border: 1px solid transparent; cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s; }
.cf-btn:last-child { margin-bottom: 0; }
.cf-btn-gold { color: var(--on-gold); background: var(--gold-grad); text-shadow: 0 1px 2px rgba(130,90,25,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 10px rgba(163,133,67,.3); }
.cf-btn-gold:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 5px 16px rgba(163,133,67,.42); }
.cf-btn-green { color: #fff; background: var(--green); }
.cf-btn-green:hover { background: #15613e; }
.cf-btn-outline { color: var(--gold-deep); background: #fff; border-color: var(--gold-200); }
.cf-btn-outline:hover { background: var(--cream); border-color: var(--gold-primary); }
.cf-btn-ghost { color: var(--n700); background: #fff; border-color: var(--n200); }
.cf-btn-ghost:hover { background: var(--n50); border-color: var(--n400); }
.cf-btn-decline { color: var(--red); background: #fff; border-color: var(--red-200); }
.cf-btn-decline:hover { background: var(--red-50); border-color: var(--red); }
.cf-act-note { font-size: 11.5px; color: var(--n500); line-height: 1.5; margin-top: 8px; text-align: center; }
.cf-cost-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--gold-700); background: var(--cream); border: 1px solid var(--cream-line); border-radius: var(--r-pill); padding: 6px 12px; margin-bottom: 12px; }

/* compose form on the detail (message) */
.cf-field { margin-top: 12px; }
.cf-field label { display: block; font-size: 12px; font-weight: 600; color: var(--n700); margin-bottom: 6px; }
.cf-textarea { width: 100%; min-height: 96px; border: 1px solid var(--n200); border-radius: var(--r-md); padding: 12px 14px; font-family: inherit; font-size: 13.5px; resize: vertical; color: var(--ink); }
.cf-textarea:focus { outline: none; border-color: var(--gold-primary); }

/* posting mini-card */
.cf-poste { border: 1.5px solid var(--gold-primary); border-radius: 15px; overflow: hidden; background: #fff; margin-bottom: 18px; }
.cf-poste-top { background: linear-gradient(168deg, #FFFDF6, var(--cream)); padding: 15px 18px; }
.cf-poste-eyebrow { font-family: var(--gm); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep); }
.cf-poste-title { font-family: 'Playfair Display', Georgia, serif; font-size: 18px; font-weight: 600; margin-top: 4px; }
.cf-poste-sub { font-size: 12.5px; color: var(--n500); margin-top: 2px; }

/* ── Thread ── */
.cf-thread { background: #fff; border: 1px solid var(--n200); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--sh-sm); height: calc(100vh - 220px); min-height: 460px; }
.cf-thread-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--n100); }
.cf-thread-head .cf-ava { width: 42px; height: 42px; font-size: 14px; }
.cf-thread-who { font-size: 14px; font-weight: 700; }
.cf-thread-ctx { font-size: 12px; color: var(--n500); margin-top: 2px; }
.cf-thread-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: var(--n50); }
.cf-thread-empty { text-align: center; color: var(--n500); font-size: 13px; margin: auto; }
.cf-bubble-row { display: flex; }
.cf-bubble-row.is-mine { justify-content: flex-end; }
.cf-bubble { max-width: 74%; padding: 10px 14px; border-radius: var(--r-lg); font-size: 13.5px; line-height: 1.5; }
.cf-bubble-row.is-mine .cf-bubble { background: var(--gold-grad); color: var(--on-gold); border-bottom-right-radius: 5px; }
.cf-bubble-row.is-theirs .cf-bubble { background: #fff; color: var(--ink); border: 1px solid var(--n200); border-bottom-left-radius: 5px; }
.cf-bubble-meta { font-size: 10.5px; margin-top: 5px; opacity: .7; }
.cf-thread-foot { border-top: 1px solid var(--n100); padding: 12px 14px; display: flex; align-items: flex-end; gap: 10px; background: #fff; }
.cf-thread-input { flex: 1 1 auto; min-height: 44px; max-height: 140px; border: 1px solid var(--n200); border-radius: 22px; padding: 11px 16px; font-family: inherit; font-size: 13.5px; resize: none; color: var(--ink); }
.cf-thread-input:focus { outline: none; border-color: var(--gold-primary); }
.cf-send { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--on-gold); background: var(--gold-grad); flex-shrink: 0; border: none; cursor: pointer; }
.cf-send:hover { filter: brightness(1.05); }
.cf-thread-limit { font-size: 11px; color: var(--n500); padding: 0 20px 12px; background: var(--n50); }

/* Approche « Sans offre liée » : la carte poste porte ce que le recruteur a
   précisé (intitulé, fourchette) au lieu de disparaitre. */
.cf-poste-facts { padding: 13px 18px; border-top: 1px solid var(--gold-line, rgba(180,140,35,0.18)); }
.cf-poste-fact { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 7px; }
.cf-poste-fact span { color: var(--n500); }
.cf-poste-fact b { font-weight: 600; text-align: right; }
.cf-poste-note { margin: 4px 0 0; font-size: 11.8px; line-height: 1.5; color: var(--n500); }