/* ═══════════════════════════════════════════════════════════════════════
   messages.css — Notifications 🔔 + Messagerie privée 💬 (côté utilisateur).
   Thème sombre cohérent avec l'app (vert #1db954).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Pastilles ─────────────────────────────────────────────────────────── */
.omsg-chip-badge{
  position:absolute; top:-5px; right:-5px;
  min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:#e02040; color:#fff;
  font-size:.66rem; font-weight:800; line-height:1;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px #191922; z-index:3;
}

.omsg-mi{ display:flex; align-items:center; gap:8px; }
.omsg-mi-ico{ font-size:.95rem; }
.omsg-badge{
  margin-left:auto; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#e02040; color:#fff;
  font-size:.68rem; font-weight:800; line-height:18px; text-align:center;
}
.omsg-badge[hidden]{ display:none; }

/* ── Overlay + fenêtre ─────────────────────────────────────────────────── */
.omsg-overlay{
  position:fixed; inset:0; z-index:4000;
  background:rgba(4,7,13,.66); backdrop-filter:blur(2px);
  display:none; align-items:center; justify-content:center; padding:24px 16px;
}
.omsg-overlay.show{ display:flex; }
.omsg-modal{
  width:100%; max-width:460px; max-height:82vh;
  background:#181820; border:1px solid #2a2a36; border-radius:16px;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  color:#e9ebf0; font-family:inherit;
}
.omsg-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid #262631; flex:0 0 auto;
}
.omsg-title{ font-weight:800; font-size:1.02rem; }
.omsg-head-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.omsg-mark{
  background:#20202a; border:1px solid #33333f; color:#c7cbd6;
  border-radius:8px; padding:6px 10px; font-size:.76rem; cursor:pointer;
  font-family:inherit; font-weight:600;
}
.omsg-mark:hover{ background:#2a2a36; color:#fff; }
.omsg-x{
  background:none; border:none; color:#9aa1b2; font-size:1.5rem; line-height:1;
  cursor:pointer; padding:2px 6px;
}
.omsg-x:hover{ color:#fff; }

.omsg-body{ overflow-y:auto; padding:10px 12px; }
.omsg-loading{ text-align:center; color:#8a91a3; padding:34px 10px; font-size:.86rem; }

/* ── États vides ───────────────────────────────────────────────────────── */
.omsg-empty{ text-align:center; color:#8a91a3; padding:40px 20px; font-size:.9rem; }
.omsg-empty-ico{ font-size:2.2rem; margin-bottom:10px; opacity:.7; }
.omsg-empty-sub{ font-size:.78rem; color:#6b7284; margin-top:6px; }

/* ── Notifications ─────────────────────────────────────────────────────── */
.omsg-notif-list{ max-height:66vh; }
.omsg-notif{
  position:relative; display:flex; gap:10px;
  padding:12px 12px 12px 14px; margin-bottom:8px;
  background:#1e1e28; border:1px solid #2a2a36; border-radius:12px;
  cursor:pointer; transition:background .12s;
}
.omsg-notif:hover{ background:#24242f; }
.omsg-notif.unread{
  background:rgba(29,185,84,.08); border-color:rgba(29,185,84,.4);
}
.omsg-dot{
  position:absolute; left:6px; top:16px;
  width:8px; height:8px; border-radius:50%; background:#1db954;
}
.omsg-notif-main{ flex:1; min-width:0; }
.omsg-notif-title{ font-weight:700; font-size:.9rem; margin-bottom:3px; }
.omsg-notif-text{ font-size:.84rem; color:#c7cbd6; line-height:1.4; word-wrap:break-word; }
.omsg-notif-time{ font-size:.72rem; color:#6b7284; margin-top:6px; display:flex; align-items:center; gap:6px; }
.omsg-tag{
  background:#2a2a36; color:#9aa1b2; border-radius:20px;
  padding:1px 8px; font-size:.66rem; font-weight:700;
}

/* ── Chat ──────────────────────────────────────────────────────────────── */
.omsg-chat{
  flex:1; overflow-y:auto; padding:14px 14px 6px;
  display:flex; flex-direction:column; gap:8px; min-height:220px;
}
.omsg-bubble-row{ display:flex; }
.omsg-bubble-row.me{ justify-content:flex-end; }
.omsg-bubble-row.them{ justify-content:flex-start; }
.omsg-bubble{
  max-width:78%; padding:8px 12px; border-radius:14px;
  font-size:.86rem; line-height:1.4; word-wrap:break-word;
}
.omsg-bubble-row.me .omsg-bubble{
  background:#1db954; color:#04140a; border-bottom-right-radius:4px;
}
.omsg-bubble-row.them .omsg-bubble{
  background:#26262f; color:#e9ebf0; border-bottom-left-radius:4px;
}
.omsg-bubble-txt{ white-space:normal; }
.omsg-bubble-time{ font-size:.66rem; opacity:.7; margin-top:4px; }
.omsg-bubble-row.me .omsg-bubble-time{ color:#0a2a15; text-align:right; }

.omsg-note{
  flex:0 0 auto; text-align:center; font-size:.7rem; color:#6b7284;
  padding:6px 10px; border-top:1px solid #262631;
}
.omsg-compose{
  flex:0 0 auto; display:flex; gap:8px; align-items:flex-end;
  padding:10px 12px 12px; border-top:1px solid #262631;
}
.omsg-input{
  flex:1; resize:none; background:#11141f; color:#e9ebf0;
  border:1px solid #2a3043; border-radius:12px;
  padding:10px 12px; font-size:.86rem; font-family:inherit; line-height:1.4;
  max-height:120px;
}
.omsg-input:focus{ outline:none; border-color:#1db954; }
.omsg-send{
  flex:0 0 auto; width:40px; height:40px; border-radius:50%;
  background:#1db954; color:#04140a; border:none; cursor:pointer;
  font-size:1.05rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  transition:transform .1s;
}
.omsg-send:hover{ transform:scale(1.06); }
.omsg-send:disabled{ opacity:.5; cursor:default; transform:none; }

@media (max-width:520px){
  .omsg-modal{ max-width:100%; max-height:88vh; }
}