/* ============================================================
   DEMANDES.CSS — Onglet demandes, offres, chat, bilan
   Dépend de : tokens.css + base.css
   ============================================================ */

/* ── Carte demande ── */
.carte-demande {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 0.5px solid var(--color-border-default);
  margin-bottom: var(--space-2);
  overflow: hidden;
  transition: var(--transition-base);
}
.carte-demande:hover { border-color: var(--color-border-strong); }

.carte-demande-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3);
}
.carte-demande-icon {
  width: 38px; height: 38px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.carte-demande-info { flex: 1; min-width: 0; }
.carte-demande-nom    { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-primary); letter-spacing: -.1px; }
.carte-demande-type   { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 1px; }
.carte-demande-motifs { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); line-height: 1.45; }

/* Statut badges — alignés avec le BO */
.statut-badge { font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px var(--space-3); border-radius: var(--radius-full); white-space: nowrap; flex-shrink: 0; }
.statut-en_attente  { background: var(--color-warning-dim); color: var(--color-warning); }
.statut-offre_recue { background: var(--color-info-dim);    color: var(--color-info); }
.statut-in_progress { background: var(--color-success-dim); color: var(--color-brand); }
.statut-acceptee    { background: var(--color-success-dim); color: var(--color-brand); }
.statut-refusee     { background: var(--color-bg-sunken);   color: var(--color-text-faint); }

.carte-demande-meta {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  padding: 0 var(--space-4) var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint);
}
.carte-demande-prix-meta { color: var(--color-brand); font-weight: var(--fw-bold); font-size: var(--text-sm); }

/* ── Offres ── */
.offres-section { border-top: 0.5px solid var(--color-border-faint); }
.offres-label   { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .08em; padding: var(--space-3) var(--space-4) var(--space-2); }
.offres-list    { display: flex; flex-direction: column; }

.offre-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-top: 0.5px solid var(--color-border-faint); cursor: pointer;
  transition: var(--transition-base); position: relative;
}
.offre-item:hover    { background: var(--color-bg-sunken); }
.offre-item.selected { background: var(--color-success-dim); }
.offre-radio { width: 18px; height: 18px; border-radius: var(--radius-full); border: 2px solid var(--color-border-strong); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: var(--transition-base); }
.offre-item.selected .offre-radio { border-color: var(--color-brand-dark); background: var(--color-brand-dark); }
.offre-check { width: 8px; height: 8px; border-radius: var(--radius-full); background: #fff; display: none; }
.offre-item.selected .offre-check { display: block; }

.offre-body       { flex: 1; min-width: 0; }
.offre-assureur   { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-primary); }
.offre-couverture { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 1px; }
.offre-message    { font-size: var(--text-xs); color: var(--color-text-muted); font-style: italic; margin-top: 2px; }
.offre-validite   { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 2px; }
.offre-droite     { text-align: right; flex-shrink: 0; }
.offre-prix       { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-brand); }
.offre-ancien     { font-size: var(--text-xs); color: var(--color-text-faint); text-decoration: line-through; }
.offre-economie   { font-size: var(--text-xs); color: var(--color-brand); font-weight: var(--fw-bold); background: var(--color-success-dim); padding: 1px var(--space-2); border-radius: var(--radius-sm); display: inline-block; margin-top: 2px; }
.offre-badge-new  { position: absolute; top: var(--space-2); right: var(--space-3); font-size: .6rem; background: var(--color-danger); color: #fff; padding: 2px var(--space-2); border-radius: var(--radius-sm); font-weight: var(--fw-bold); }

.offre-actions { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 0.5px solid var(--color-border-faint); }
.btn-accepter-offre {
  flex: 1; background: var(--color-brand); color: var(--color-text-on-brand); border: none;
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); font-weight: var(--fw-bold); cursor: pointer;
  font-family: var(--font-sans); transition: var(--transition-base);
}
.btn-accepter-offre:hover    { opacity: .88; }
.btn-accepter-offre:disabled { opacity: .35; cursor: not-allowed; }
.btn-refuser-offre {
  background: var(--color-bg-sunken); color: var(--color-text-muted);
  border: 0.5px solid var(--color-border-default);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm); cursor: pointer; font-family: var(--font-sans); transition: var(--transition-base);
}
.btn-refuser-offre:hover { background: var(--color-danger-dim); color: var(--color-danger); border-color: rgba(255,92,92,.3); }

.demande-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-2) var(--space-4) var(--space-3);
  border-top: 0.5px solid var(--color-border-faint);
}
.btn-suppr-demande {
  font-size: var(--text-xs); color: var(--color-text-faint); background: none;
  border: 0.5px solid var(--color-border-faint);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  cursor: pointer; font-family: var(--font-sans); transition: var(--transition-base);
}
.btn-suppr-demande:hover { background: var(--color-danger-dim); color: var(--color-danger); border-color: rgba(255,92,92,.3); }

/* ── Bilan avant/après ── */
.chat-section { border-top: 0.5px solid var(--color-border-faint); }
.bilan-card   { background: var(--color-success-dim); border-bottom: 0.5px solid rgba(0,200,150,.15); padding: var(--space-3) var(--space-4); }
.bilan-header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.bilan-titre  { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-brand); flex: 1; }
.bilan-badge  { font-size: var(--text-xs); font-weight: var(--fw-bold); background: var(--color-brand-dark); color: var(--color-text-on-brand); padding: 2px var(--space-2); border-radius: var(--radius-full); }
.bilan-comparaison { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.bilan-avant, .bilan-apres { flex: 1; background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-3); }
.bilan-fleche { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bilan-comp-label    { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.bilan-comp-assureur { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-text-primary); margin-bottom: 3px; }
.bilan-comp-prix     { font-size: var(--text-md); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.bilan-comp-prix span{ font-size: var(--text-xs); font-weight: var(--fw-regular); color: var(--color-text-faint); margin-left: 2px; }
.bilan-prix-vert     { color: var(--color-brand); }
.bilan-economies     { display: flex; align-items: center; background: var(--color-bg-card); border-radius: var(--radius-md); overflow: hidden; }
.bilan-eco-item      { flex: 1; padding: var(--space-2) var(--space-3); text-align: center; }
.bilan-eco-sep       { width: 0.5px; background: var(--color-border-faint); align-self: stretch; }
.bilan-eco-val       { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-brand); }
.bilan-eco-label     { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 2px; }

/* ── Chat ── */
.chat-container { display: flex; flex-direction: column; }
.chat-header    { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-success-dim); border-bottom: 0.5px solid rgba(0,200,150,.12); }
.chat-avatar    { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-brand-dark); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--fw-bold); color: #fff; flex-shrink: 0; }
.chat-titre     { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--color-brand); }
.chat-sous      { font-size: var(--text-xs); color: var(--color-brand); opacity: .7; margin-top: 1px; }
.chat-messages  { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); max-height: 220px; overflow-y: auto; }
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--color-border-default); border-radius: var(--radius-full); }
.chat-msg       { max-width: 78%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--text-xs); line-height: 1.5; }
.chat-msg-courtier { background: var(--color-bg-sunken); color: var(--color-text-primary); border-radius: var(--radius-md) var(--radius-md) var(--radius-md) 2px; align-self: flex-start; }
.chat-msg-user     { background: var(--color-brand-dark); color: var(--color-text-on-brand); border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md); align-self: flex-end; }
.chat-time      { font-size: .6rem; opacity: .5; margin-top: 3px; }
.chat-input-row { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 0.5px solid var(--color-border-faint); }
.chat-input     { flex: 1; border: 1.5px solid var(--color-border-default); border-radius: var(--radius-full); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); outline: none; transition: var(--transition-base); font-family: var(--font-sans); background: var(--color-input-bg); color: var(--color-text-primary); }
.chat-input:focus { border-color: var(--color-brand); }
.chat-input::placeholder { color: var(--color-text-faint); }
.chat-send-btn  { width: 32px; height: 32px; background: var(--color-brand-dark); border: none; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: var(--transition-base); }
.chat-send-btn:hover { opacity: .88; }

/* ── Bandeau économies ── */
.stats-bandeau { background: var(--color-success-dim); border: 0.5px solid rgba(0,200,150,.2); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-6); }
.stats-bandeau-titre { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-brand); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3); }
.stats-bandeau-metriques { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.stats-metric     { flex: 1; background: var(--color-bg-card); border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); text-align: center; }
.stats-metric-val { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-brand); line-height: 1.2; }
.stats-metric-label { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: 3px; line-height: 1.3; }
.bilan-bar-row   { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.bilan-bar-label { display: flex; flex-direction: column; width: 72px; flex-shrink: 0; }
.bilan-bar-nom   { font-size: var(--text-xs); font-weight: var(--fw-semibold); color: var(--color-brand); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bilan-bar-type  { font-size: var(--text-xs); color: var(--color-brand); opacity: .7; }
.bilan-bar-bg    { flex: 1; height: 5px; background: rgba(0,200,150,.12); border-radius: var(--radius-full); overflow: hidden; }
.bilan-bar-fill  { height: 5px; background: var(--color-brand-dark); border-radius: var(--radius-full); transition: width .4s ease; }
.bilan-bar-val   { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--color-brand); width: 40px; text-align: right; flex-shrink: 0; }