@charset "UTF-8";

/* ---- Carte globale du widget ---- */
.esth-msg .ts-inbox{
  --esth-primary:#E50053; --esth-bg:#f7f8fb; --esth-surface:#fff; --esth-border:#e8eaf0; --esth-text:#111318;
  --esth-shadow:0 12px 28px rgba(17,19,24,.08);
  background:var(--esth-surface);
  border:1px solid var(--esth-border);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--esth-shadow);
}

/* ---- En-tête rose côté droit (barre au-dessus de la conversation) ----
   on prend le 1er enfant de .ts-message-body comme header */
.esth-msg .ts-message-body > :first-child{
  background:#E50053 !important;
  color:#fff !important;
  padding:14px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.25);
}
.esth-msg .ts-message-body > :first-child h1,
.esth-msg .ts-message-body > :first-child h2,
.esth-msg .ts-message-body > :first-child h3,
.esth-msg .ts-message-body > :first-child *{ color:#fff !important }

/* ---- Colonne gauche : fond doux ---- */
.esth-msg .inbox-left{
  background:var(--esth-bg);
  border-right:1px solid var(--esth-border);
}

/* ---- Cartes des conversations (ul.ts-convo-list > li) ---- */
.esth-msg .ts-convo-list{ padding:10px 8px }
.esth-msg .ts-convo-list > li{
  /* on neutralise le style d’origine */
  border-left:0 !important;
  background:linear-gradient(180deg, var(--esth-bg), #fff 18%);
  border:1px solid var(--esth-border);
  border-radius:14px;
  margin:10px 6px;
  padding:10px 12px !important;
  box-shadow:0 6px 18px rgba(17,19,24,.06);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.esth-msg .ts-convo-list > li:hover{
  background:#fff;
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(17,19,24,.10);
}
.esth-msg .ts-convo-list > li.ts-active-chat{
  border-color:rgba(229,0,83,.45) !important;
  box-shadow:0 0 0 2px rgba(229,0,83,.12) inset, 0 10px 24px rgba(17,19,24,.08);
}

/* petits réglages internes de la carte */
.esth-msg .ts-convo-list > li .convo-avatars img{ 
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.esth-msg .ts-convo-list > li .message-details b{ color:#111318; font-weight:800 }
.esth-msg .ts-convo-list > li .message-details span{ color:#64748b }

/* ---- Panneau droit propre ---- */
.esth-msg .ts-message-body{ background:#fff }
.esth-msg .ts-message-body .ts-message-body > *{ background:transparent }
.esth-msg .ts-message-body .ts-message{
  background:#fff; border:1px solid var(--esth-border);
  border-radius:14px; padding:10px 12px; box-shadow:0 3px 10px rgba(17,19,24,.05);
}
.esth-msg .ts-message-body .ts-message.self{
  background:#fff3f7; border-color:#ffcce0;
}

/* ---- Zone composer (bas) ---- */
.esth-msg .ts-message-body .ts-message-body > :last-child{
  background:var(--esth-bg); border-top:1px solid var(--esth-border);
}
.esth-msg .ts-message-body input[type="text"],
.esth-msg .ts-message-body textarea{
  border:1px solid var(--esth-border); border-radius:14px; background:#fff; padding:12px; outline:none;
}
.esth-msg .ts-message-body input[type="text"]:focus,
.esth-msg .ts-message-body textarea:focus{
  border-color:#E50053; box-shadow:0 0 0 3px rgba(229,0,83,.15);
}
.esth-msg .ts-message-body .ts-btn-group button{
  background:#fff; border:1px solid var(--esth-border); border-radius:12px;
  width:38px; height:38px; transition:.15s;
}
.esth-msg .ts-message-body .ts-btn-group button:hover{
  transform:translateY(-1px); box-shadow:0 8px 18px rgba(17,19,24,.1); color:#E50053;
}