/* --- ID 262: hivepress - message --- */
/*************************************************
 * HOMERENTAI — COMPTE > MESSAGES (CLEAN / FINAL)
 * Objectifs :
 * 1) LISTE /account/messages/ = même DA que /account/listings/
 * 2) THREAD (conversation) = garde le style “bulles” déjà validé
 *************************************************/

/* ================================
   0) Variables DA (cohérence)
   ================================ */
:root{
  --hr-blue:#4C6FFF;
  --hr-text:#0f172a;
  --hr-muted:#94a3b8;
  --hr-muted2:#9ca3af;

  --hr-card:#ffffff;
  --hr-line:rgba(15,23,42,.06);

  /* Panel derrière la liste (comme Annonces) */
  --hr-panel:#fefefe; /* ~254/254/254 */

  /* Ombres */
  --hr-shadow:0 24px 80px rgba(15,23,42,.06);
  --hr-shadow-hover:0 22px 60px rgba(76,111,255,.22), 0 0 0 1px rgba(76,111,255,.06);

  --hr-radius:26px;
  --hr-panel-radius:32px;
}

/* ==========================================================
   1) LISTE DES THREADS — /account/messages/
   Scope : uniquement quand c'est la TABLE (pas la conversation)
   ========================================================== */
.hp-page__content:has(.hp-messages.hp-table):not(:has(.hp-messages.hp-grid + form.hp-form--message-send)){

  /* (Important) on NE met PAS le panel sur .hp-page__content
     => ça évite d'englober le titre. */

  /* Table = pile de cards, comme Annonces */
  .hp-messages.hp-table{
    width:100% !important;
    border-collapse:separate !important;
    border-spacing:0 18px !important;
    table-layout:fixed !important; /* évite les débordements */

    /* ✅ le panel commence ici (donc sous le titre) */
    position:relative !important;
    z-index:0 !important;
    isolation:isolate !important;

    /* ✅ espace comme sur Annonces */
    margin-top:22px !important;
    margin-bottom:22px !important;
  }

  /* ✅ Panel derrière la liste (même vibe que Annonces)
     + plus d’air en haut/bas autour des lignes */
  .hp-messages.hp-table::before{
    content:"";
    position:absolute;
    /* + grand => + d'espace vide haut/bas comme sur Annonces */
    inset:-34px -26px -34px -26px;
    background:var(--hr-panel) !important;
    border-radius:var(--hr-panel-radius) !important;
    box-shadow:0 24px 80px rgba(15,23,42,.06) !important;
    z-index:-1 !important;
  }

  /* reset tableau */
  .hp-messages.hp-table,
  .hp-messages.hp-table tbody,
  .hp-messages.hp-table tr,
  .hp-messages.hp-table td{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Card row (relief bien visible) */
  .hp-messages.hp-table tr.hp-message{
    background:var(--hr-card) !important;
    border-radius:var(--hr-radius) !important;

    /* ✅ shadow légèrement plus lisible (toujours soft) */
    box-shadow:0 18px 55px rgba(15,23,42,.08) !important;

    border:0 !important;
    overflow:hidden !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
  }

  /* Hover = glow bleu + lift (comme Annonces) */
  .hp-messages.hp-table tr.hp-message:hover{
    transform:translateY(-3px) !important;
    box-shadow:var(--hr-shadow-hover) !important;
    background:var(--hr-card) !important;
  }

  /* Cellules */
  .hp-messages.hp-table tr.hp-message > td{
    padding:16px 24px !important;
    vertical-align:middle !important;
    min-width:0 !important; /* important pour ellipsis */
  }

  /* Liens */
  .hp-messages.hp-table a.hp-link{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    text-decoration:none !important;
    color:var(--hr-text) !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  /* Texte ellipsis safe */
  .hp-messages.hp-table a.hp-link span{
    display:inline-block !important;
    min-width:0 !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Icône enveloppe : bleu, sans rond */
  .hp-messages.hp-table td.hp-message__sender .hp-icon{
    background:transparent !important;
    border-radius:0 !important;
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    box-shadow:none !important;
    color:var(--hr-blue) !important;
    flex:0 0 auto !important;
  }

  /* Sender : “title-like” */
  .hp-messages.hp-table td.hp-message__sender a.hp-link span{
    font-weight:600 !important;
    color:var(--hr-text) !important;
  }

  /* Listing : plus discret */
  .hp-messages.hp-table td.hp-message__listing a.hp-link{
    color:rgba(15,23,42,.72) !important;
  }
  .hp-messages.hp-table td.hp-message__listing .hp-icon{
    color:var(--hr-blue) !important;
    opacity:.9 !important;
  }

  /* Date (mois complet) */
  .hp-messages.hp-table td.hp-message__sent-date{
    text-align:right !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }
  .hp-messages.hp-table td.hp-message__sent-date time{
    color:var(--hr-muted2) !important;
    font-size:.95rem !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }

  /* =========================
     Desktop / tablette (≥ 769px)
     ========================= */
  @media (min-width:769px){

    .hp-messages.hp-table tr.hp-message{
      display:flex !important;
      align-items:center !important;
      gap:0 !important;
    }

    .hp-messages.hp-table td.hp-message__sender{
      flex:0 1 32% !important;
      min-width:0 !important;
    }

    .hp-messages.hp-table td.hp-message__listing{
      flex:1 1 auto !important;
      min-width:0 !important;
      color:var(--hr-muted) !important;
    }

    .hp-messages.hp-table td.hp-message__sent-date{
      flex:0 0 260px !important;
      min-width:260px !important;
      margin-left:auto !important;
      text-align:right !important;
    }

    .hp-messages.hp-table td{
      border-left:0 !important;
      border-right:0 !important;
    }
  }

  /* =========================
     Mobile (≤ 768px)
     ========================= */
  @media (max-width:768px){

    .hp-messages.hp-table{
      border-spacing:0 16px !important;
      width:100% !important;

      /* garde un peu d'air en mobile aussi */
      margin-top:18px !important;
      margin-bottom:18px !important;
    }

    /* panel plus compact en mobile */
    .hp-messages.hp-table::before{
      inset:-22px -18px -22px -18px;
      border-radius:28px !important;
    }

    .hp-messages.hp-table tr.hp-message{
      display:block !important;
    }

    .hp-messages.hp-table tr.hp-message > td{
      display:block !important;
      width:100% !important;
      padding:10px 20px !important;
      text-align:left !important;
    }

    /* Sender (ligne 1) */
    .hp-messages.hp-table td.hp-message__sender{
      font-weight:600 !important;
      font-size:1.02rem !important;
      margin-bottom:4px !important;
    }

    /* Listing (ligne 2) */
    .hp-messages.hp-table td.hp-message__listing{
      color:var(--hr-muted) !important;
      margin-bottom:10px !important;
    }

    /* Date (ligne 3) */
    .hp-messages.hp-table td.hp-message__sent-date{
      border-top:1px solid var(--hr-line) !important;
      padding-top:10px !important;
      text-align:right !important;
    }
  }
}

/* ==========================================================
   2) THREAD (échange) — style “bulles” unifié
   Scoped dès qu'on est en mode conversation (grid)
   ========================================================== */
.hp-page__content:has(.hp-messages.hp-grid):not(:has(.hp-messages.hp-table)){

  .hp-messages.hp-grid{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .hp-message{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    border-radius:0 !important;
    padding:0 !important;
    margin:0 !important;
  }

  .hp-message__header{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    padding:0 !important;
    margin:0 0 6px 0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  a.hp-message__listing{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    max-width:100%;
    width:fit-content;
    padding:6px 10px !important;
    border-radius:999px !important;
    background:#fff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 10px 26px rgba(15,23,42,.06) !important;
    text-decoration:none !important;
    color:var(--hr-text) !important;
  }

  a.hp-message__listing span{
    display:inline-block;
    max-width:520px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  a.hp-message__listing .hp-icon{ color:var(--hr-blue) !important; }

  .hp-message__details{
    display:flex !important;
    align-items:baseline !important;
    gap:10px !important;
    padding:0 !important;
    margin:0 !important;
  }

  .hp-message__sender{ display:none !important; }

  .hp-message__date{
    margin:0 !important;
    font-size:.85rem !important;
    letter-spacing:.02em;
    color:rgba(15,23,42,.55) !important;
    white-space:nowrap;
  }

  .hp-message__content{
    padding:0 !important;
    margin:0 !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .hp-message__text{
    display:inline-block !important;
    max-width:min(820px, 94%) !important;
    padding:12px 18px !important;
    border-radius:18px !important;
    line-height:1.35 !important;
    border:1px solid transparent !important;
    background-image:none !important;
    box-shadow:none !important;
  }

  .hp-message__text p{ margin:0 !important; }

  .hp-message:not(.hp-message--sent) .hp-message__text{
    background:#ffffff !important;
    color:var(--hr-text) !important;
    border-color:rgba(226,232,240,.95) !important;
  }

  .hp-message.hp-message--sent .hp-message__text{
    background:var(--hr-blue) !important;
    color:#ffffff !important;
    border-color:rgba(76,111,255,.25) !important;
  }

  .hp-message.hp-message--sent{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }

  .hp-message:not(.hp-message--sent){
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }

  .hp-message__details{ margin-top:8px !important; }

  /* Retirer l'icône de double coche */
  .hp-message__header .fa-check,
  .hp-message__header .fa-check-double,
  .hp-message__header .hp-icon.fas.fa-check,
  .hp-message__header .hp-icon.fas.fa-check-double{
    display:none !important;
  }

  /* Retirer la double coche native (pseudo-element) */
  .hp-message--view-block::after{
    content:none !important;
    display:none !important;
  }

  /* Supprimer totalement l'accès à la suppression */
  .hp-message__action,
  .hp-message__action--delete{
    display:none !important;
    pointer-events:none !important;
    visibility:hidden !important;
  }

  .hp-messages.hp-grid + form.hp-form--message-send{
    margin-top:22px !important;
  }

  form.hp-form--message-send{
    padding:18px 18px 20px !important;
    border-radius:22px !important;
    background:#ffffff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    box-shadow:0 18px 50px rgba(15,23,42,.08) !important;
  }
}