/* zzzz-messages.css — Messages (app) : finitions maquette 04.
   Role : 3 ajouts visuels sur le bloc refonte .ar-msg (deja au DOM) —
   pastille non-lus cyan sous l'heure, point de presence sur l'avatar, FAB cyan.
   100% additif. Rollback = supprimer ce fichier (aucun autre CSS ne depend de lui).
   Ne touche NI Gardien (classes gw, gardien) NI Etincelles (classe etincelle).
   [16/08 FIX : l'ancien commentaire contenait une sequence qui fermait le commentaire CSS
    trop tot et rendait TOUT ce fichier inerte. Corrige. */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* 0) (16/08) Barre du haut GLOBALE en double : la maquette 04 n'a QU'UN en-tete
        (« Messages » + recherche + crayon + avatar, dans .ar-msg-head). Comme Radar/Voyageurs,
        on masque .pub-topbar sur cet ecran. Le menu/notifs restent via la barre du bas + l'avatar. */
  html.apprefonte body.page-messages .pub-topbar { display: none !important; }

  /* 1) Colonne meta : heure en haut, pastille non-lus dessous (maquette). */
  html.apprefonte .ar-msg .ar-conv-meta {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
  }

  /* 1-bis) Pastille non-lus = pastille cyan pleine, encre navy (comme la maquette). */
  html.apprefonte .ar-msg .ar-conv-badge {
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #35D7D1 !important;
    color: #071624 !important;
    border: 0 !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
  }

  /* 2) Point de presence sur l'avatar (coin bas-droit, anneau = surface). */
  html.apprefonte .ar-msg .ar-conv-av { position: relative; }
  html.apprefonte .ar-msg .ar-dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    border: 2px solid #0D2233;
    box-sizing: border-box;
  }
  html.apprefonte .ar-msg .ar-dot-on     { background: #3FD07A !important; }  /* en ligne = vert (maquette) */
  html.apprefonte .ar-msg .ar-dot-recent { background: #FFB65A !important; }  /* recemment actif = ambre */
  html.apprefonte .ar-msg .ar-dot-off    { display: none !important; }        /* hors ligne = pas de point */

  /* 3) FAB « Nouveau message » = pastille cyan pleine, icone claire, halo doux. */
  html.apprefonte .ar-msg-fab {
    background: #35D7D1 !important;
    color: #F6F0DF !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(53, 215, 209, .35) !important;
  }
  html.apprefonte .ar-msg-fab svg { color: #F6F0DF !important; }

  /* 4) (16/08) VUE CONVERSATION (messages.php?to=X) EN APP : « on doit voir QUE les messages ».
        En vue fil, la page rend l'intro « Pigeons voyageurs » + la colonne compagnons/BOÎTE DE
        RÉCEPTION (liste dupliquée) AU-DESSUS du fil → il fallait scroller tout ça avant de lire.
        On masque l'intro et cette colonne latérale ; il ne reste que le fil (en-tête interlocuteur,
        messages, « Écris ton message », Envoyer, RDV sécurisé). Vue LISTE non affectée (.msg-grid
        y est déjà entièrement masquée). BUREAU intact (tout est dans le @media). */
  html.apprefonte body.page-messages .pub-pagehead { display: none !important; }
  html.apprefonte body.page-messages .msg-grid > aside.adm-card { display: none !important; }

}