/* ============================================================
   OFFICEA — Module Messages côté client v7 (solution radicale)
   ============================================================
   APPROCHE :
   - L'en-tête et la zone de saisie sont en position: fixed
   - La liste des messages est en position: absolute entre les deux
   - Plus aucun calc(100vh - ...) qui pose problème
   - Comportement iMessage/WhatsApp natif
   ============================================================ */

/* Reset le tab-messages, devient juste un conteneur de positionnement */
#tab-messages.tab-panel.active {
  display: block;
  position: fixed;
  top: 64px;          /* sous le header app */
  left: 0;
  right: 0;
  bottom: 72px;       /* au-dessus de la nav */
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 1;
  background: #f5f1e8;
}

/* Quand l'onglet Messages n'est pas actif, on cache complètement */
#tab-messages.tab-panel:not(.active) {
  display: none;
}

/* En-tête référent — FIXÉ EN HAUT du conteneur */
#msg-chat-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #e8e0d0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 3;
  cursor: pointer;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}
#msg-chat-head:active {
  background: #faf6ec;
}
#msg-chat-head .msg-referent-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8843f, #9d6f30);
  color: #fff;
  font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
#msg-chat-head .msg-referent-info { flex: 1; min-width: 0; }
#msg-chat-head .msg-referent-name {
  font-size: 14px; font-weight: 600;
  color: #1a2942;
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#msg-chat-head .msg-referent-role {
  font-size: 11.5px;
  color: #6a6558;
  margin: 0;
}
#msg-chat-head::after {
  content: "›";
  font-size: 24px;
  color: #b8843f;
  margin-left: 8px;
  flex-shrink: 0;
}
#msg-chat-head .msg-no-referent {
  font-size: 13px;
  color: #6a6558;
  margin: 0;
  font-style: italic;
}
#msg-chat-head:has(.msg-no-referent) {
  cursor: default;
}
#msg-chat-head:has(.msg-no-referent)::after {
  display: none;
}

/* Liste messages — entre en-tête (60px) et zone saisie (60px) */
#msg-messages {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 60px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  background: #f5f1e8;
  box-sizing: border-box;
}

/* ════════════ BULLES ════════════ */
.msg-bubble {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 75%;
  width: fit-content;
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.32;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  margin-bottom: 1px;
  flex-shrink: 0;
}

.msg-bubble.from-client {
  align-self: flex-end;
  background: #1a2942;
  color: #f5f1e8;
  border-bottom-right-radius: 4px;
}
.msg-bubble.from-cabinet,
.msg-bubble.from-referent,
.msg-bubble.from-admin {
  align-self: flex-start;
  background: #e6e2d4;
  color: #1a2942;
  border-bottom-left-radius: 4px;
}

.msg-meta {
  font-size: 10px;
  margin-top: 2px;
  opacity: 0.55;
  align-self: flex-end;
}
.msg-bubble.from-client .msg-meta { color: rgba(245,241,232,0.7); }
.msg-bubble.from-cabinet .msg-meta,
.msg-bubble.from-referent .msg-meta,
.msg-bubble.from-admin .msg-meta { color: #6a6558; opacity: 0.7; }

.msg-bubble.from-client + .msg-bubble.from-client,
.msg-bubble.from-cabinet + .msg-bubble.from-cabinet,
.msg-bubble.from-referent + .msg-bubble.from-referent,
.msg-bubble.from-admin + .msg-bubble.from-admin {
  margin-top: 1px;
}

.msg-bubble.msg-optimistic {
  /* Aucun style spécifique : le message paraît normal pour une UX fluide.
     Si l'envoi échoue, le message est retiré de la liste et un toast d'erreur s'affiche. */
}

/* Compose — FIXÉ EN BAS du conteneur */
#msg-compose {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 60px;
  padding: 8px 10px 10px;
  border-top: 1px solid #e8e0d0;
  background: #faf6ec;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  z-index: 3;
  box-sizing: border-box;
}
#msg-compose textarea {
  flex: 1;
  background: #fff;
  border: 1px solid #e0d7c0;
  border-radius: 18px;
  padding: 9px 14px;
  font-family: inherit; font-size: 16px;
  resize: none; outline: none;
  color: #1a2942;
  max-height: 100px;
  min-height: 38px;
  line-height: 1.3;
}
#msg-compose textarea:focus { border-color: #b8843f; }
#msg-compose button {
  width: 38px; height: 38px;
  background: #b8843f;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 0.12s, background 0.15s;
}
#msg-compose button:hover { background: #9d6f30; }
#msg-compose button:active { transform: scale(0.94); }
#msg-compose button:disabled { opacity: 0.35; cursor: wait; }
#msg-compose button svg { width: 16px; height: 16px; }

/* Bouton trombone : style distinct (transparent, navy) */
#msg-compose button.msg-attach-btn {
  background: transparent;
  color: #1a2942;
  border: 1px solid #e0d7c0;
}
#msg-compose button.msg-attach-btn:hover {
  background: #f0eada;
}
#msg-compose button.msg-attach-btn svg {
  width: 18px; height: 18px;
}

/* Date séparateur */
.msg-date-separator {
  text-align: center;
  font-size: 11px;
  color: #8a8474;
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  align-self: center;
  width: 100%;
  flex-shrink: 0;
}

/* Empty state */
#msg-messages .empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #8a8474;
  font-style: italic;
  font-size: 13px;
  align-self: center;
  margin: auto;
  background: transparent;
  border: none;
  list-style: none;
}

/* ════════════ MODALE FICHE RÉFÉRENT ════════════ */
.ref-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 41, 66, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: refFadeIn 0.25s ease;
}
@media (min-width: 720px) {
  .ref-modal-overlay { align-items: center; padding: 24px; }
}
@keyframes refFadeIn { from { opacity: 0; } to { opacity: 1; } }

.ref-modal-card {
  background: #f5f1e8;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 20px 20px 0 0;
  padding: 24px 22px calc(24px + env(safe-area-inset-bottom, 0));
  position: relative;
  animation: refSlideUp 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@media (min-width: 720px) {
  .ref-modal-card { border-radius: 16px; }
}
@keyframes refSlideUp { from { transform: translateY(40px); } to { transform: translateY(0); } }

.ref-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  background: rgba(0,0,0,0.06);
  border: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 18px;
  color: #1a2942;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1;
}

.ref-modal-avatar {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8843f, #9d6f30);
  color: #fff;
  font-size: 32px; font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  margin: 8px auto 16px;
}
.ref-modal-avatar.has-photo {
  background-color: #e8e0d0;
}

.ref-modal-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  color: #1a2942;
  text-align: center;
  margin: 0 0 4px;
}
.ref-modal-name em {
  font-style: italic;
  color: #b8843f;
}
.ref-modal-role {
  text-align: center;
  font-size: 13px;
  color: #b8843f;
  font-style: italic;
  margin: 0 0 18px;
}

.ref-modal-section {
  margin-bottom: 16px;
}
.ref-modal-section:last-child { margin-bottom: 0; }
.ref-modal-section-title {
  font-size: 11px;
  color: #6a6558;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin: 0 0 6px;
}
.ref-modal-bio {
  font-size: 14px;
  color: #4a4538;
  line-height: 1.55;
  margin: 0;
  padding: 14px;
  background: #fff;
  border-radius: 10px;
  border-left: 3px solid #b8843f;
}
.ref-modal-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.ref-modal-info-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 8px;
  font-size: 13.5px;
  color: #1a2942;
}
.ref-modal-info-row .ref-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.ref-modal-info-row .ref-label {
  color: #6a6558;
  margin-right: 4px;
}
.ref-modal-info-row .ref-value {
  font-weight: 500;
  word-break: break-word;
}

.ref-modal-empty {
  font-size: 13px;
  color: #8a8474;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* ════════════ FICHE RÉFÉRENT (onglet Ma fiche - inchangé) ════════════ */
.ref-fiche-section .ref-fiche-card {
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  padding: 20px;
}

.ref-fiche-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.ref-fiche-avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b8843f, #9d6f30);
  color: #fff;
  font-size: 22px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.ref-fiche-titles { flex: 1; min-width: 0; }
.ref-fiche-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px; font-weight: 500;
  color: #1a2942;
  margin: 0 0 2px;
}
.ref-fiche-role {
  font-size: 12.5px;
  color: #b8843f;
  margin: 0;
  font-style: italic;
}
.ref-fiche-bio {
  font-size: 13px;
  color: #4a4538;
  line-height: 1.5;
  margin: 0 0 12px;
  padding: 12px;
  background: #faf6ec;
  border-radius: 8px;
  border-left: 3px solid #b8843f;
}
.ref-fiche-list {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid #f0e9d8;
}

/* ════════════════════════════════════════════════════
   PIÈCES JOINTES — Sheet + rendu messages
   ════════════════════════════════════════════════════ */

/* ─── Sheet de choix (bottom sheet iOS-style) ─── */
.msg-attach-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
}

.msg-attach-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 41, 66, 0.45);
}

.msg-attach-sheet-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: #faf6ec;
  border-radius: 16px 16px 0 0;
  padding: 18px 16px 24px;
  animation: msg-sheet-up 0.25s ease-out;
}

@keyframes msg-sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.msg-attach-sheet-content h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #1a2942;
  margin: 0 0 14px;
  text-align: center;
}

.msg-attach-option {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e8e0d0;
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 10px;
  font-family: inherit;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.msg-attach-option:active {
  background: #f5f1e8;
  transform: scale(0.98);
}

.msg-attach-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: #f5f1e8;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.msg-attach-label {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a2942;
}

.msg-attach-desc {
  margin: 2px 0 0;
  font-size: 12px;
  color: #6a6478;
}

.msg-attach-cancel {
  width: 100%;
  padding: 14px;
  background: transparent;
  border: 1px solid #d9cfb8;
  border-radius: 12px;
  color: #1a2942;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 4px;
}

.msg-attach-cancel:active {
  background: #f0eada;
}

/* ─── Rendu d'une pièce jointe dans une bulle ─── */
.msg-bubble.has-attachment {
  max-width: 80%;
  padding: 6px;
}

.msg-attachment-image {
  display: block;
  border-radius: 12px;
  overflow: hidden;
  max-width: 240px;
  cursor: pointer;
}

.msg-attachment-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 300px;
  object-fit: cover;
}

.msg-attachment-doc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  min-width: 200px;
}

.from-client .msg-attachment-doc {
  background: rgba(255, 255, 255, 0.15);
}

.msg-attachment-doc .msg-attachment-icon {
  font-size: 26px;
  flex-shrink: 0;
  width: auto;
  height: auto;
  background: transparent;
}

.msg-attachment-info {
  flex: 1;
  min-width: 0;
}

.msg-attachment-info .msg-attachment-name {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-attachment-meta {
  margin: 2px 0 0;
  font-size: 11px;
  opacity: 0.7;
}

.msg-attachment-arrow {
  font-size: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

/* Upload en cours */
.msg-attachment-uploading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  font-size: 13px;
}

.from-client .msg-attachment-uploading {
  background: rgba(255, 255, 255, 0.15);
}

.msg-attachment-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: msg-att-spin 0.8s linear infinite;
  flex-shrink: 0;
  opacity: 0.7;
}

@keyframes msg-att-spin {
  to { transform: rotate(360deg); }
}

.msg-attachment-status {
  margin-left: auto;
  font-size: 11px;
  opacity: 0.7;
}

/* Image qui échoue à charger : placeholder propre */
.msg-img-failed {
  width: 240px !important;
  height: 180px !important;
  background: #f0eada !important;
  border: 2px dashed #d9cfb8 !important;
  border-radius: 12px !important;
  object-fit: contain !important;
  padding: 16px !important;
  opacity: 0.5;
}
.msg-attachment-image:has(.msg-img-failed)::after {
  content: '📷 Ouvrir dans Drive';
  display: block;
  text-align: center;
  font-size: 12px;
  color: #6a6478;
  margin-top: 4px;
}