.messages-page{
  padding-top:8px;
  padding-bottom:calc(var(--nav-h) + 12px);
  min-height:calc(100dvh - 64px);
}

.messages-toolbar{
  display:flex;
  align-items:center;
  gap:8px;
}

.message-tabs{
  min-width:0;
  flex:1;
  min-height:40px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  display:grid;
  grid-template-columns:1fr 1fr;
}

.message-tabs button{
  min-width:0;
  min-height:32px;
  padding:0 8px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  font-size:.64rem;
}

.message-tabs button.active{
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-weight:850;
}

.request-count{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--coral);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.5rem;
  font-weight:900;
}

.new-message-button{
  width:40px;
  height:40px;
  flex:0 0 40px;
  padding:0;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  color:var(--primary);
  display:grid;
  place-items:center;
  box-shadow:0 5px 16px rgba(22,69,64,.06);
}

.new-message-button:active{
  background:var(--primary-soft);
}

.conversation-list{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
}

.conversation-row{
  width:100%;
  min-height:72px;
  padding:10px 11px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  text-align:left;
}

.conversation-row:last-child{
  border-bottom:0;
}

.conversation-row:active{
  background:var(--primary-soft);
}

.conversation-avatar,
.chat-header-avatar,
.new-message-avatar{
  width:43px;
  height:43px;
  flex:0 0 43px;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary-dark);
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:.63rem;
  font-weight:900;
}

.conversation-avatar img,
.chat-header-avatar img,
.new-message-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.conversation-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.conversation-name-line{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
}

.conversation-name-line strong{
  min-width:0;
  overflow:hidden;
  color:var(--text);
  font-size:.68rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conversation-name-line em{
  flex:0 0 auto;
  padding:2px 5px;
  border-radius:999px;
  background:#fff4dc;
  color:#9b6b12;
  font-size:.46rem;
  font-style:normal;
  font-weight:850;
}

.conversation-copy > small{
  color:var(--muted);
  font-size:.53rem;
}

.conversation-preview{
  min-width:0;
  overflow:hidden;
  color:var(--muted);
  font-size:.58rem;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.conversation-preview b{
  color:var(--primary-dark);
  font-weight:850;
}

.conversation-row time{
  align-self:start;
  margin-top:3px;
  color:var(--muted);
  font-size:.5rem;
}

.messages-empty{
  min-height:230px;
  margin-top:10px;
  padding:26px 20px;
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
}

.messages-empty-icon{
  width:43px;
  height:43px;
  border-radius:15px;
  background:var(--primary-soft);
  color:var(--primary);
  display:grid;
  place-items:center;
  font-size:1.25rem;
}

.messages-empty strong{
  color:var(--text);
  font-size:.76rem;
}

.messages-empty p{
  max-width:290px;
  margin:0;
  color:var(--muted);
  font-size:.61rem;
  line-height:1.45;
}

.messages-empty > button{
  min-height:34px;
  margin-top:4px;
  padding:0 13px;
  border:0;
  border-radius:10px;
  background:var(--primary);
  color:#fff;
  font-size:.6rem;
  font-weight:850;
}

.messages-loading{
  min-height:170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--muted);
  font-size:.6rem;
}

.messages-loading span,
.chat-loading span,
.message-search-loading span{
  width:20px;
  height:20px;
  border:2px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:ssv-message-spin .7s linear infinite;
}

@keyframes ssv-message-spin{
  to{transform:rotate(360deg)}
}

.messages-error,
.chat-error{
  margin-top:9px;
  padding:8px 10px;
  border-radius:10px;
  background:rgba(199,67,85,.08);
  color:#b73e50;
  font-size:.57rem;
}

/* Chat */

.chat-view{
  min-height:calc(100dvh - var(--nav-h) - 84px);
  border:1px solid var(--border);
  border-radius:18px;
  background:var(--surface);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.chat-header{
  min-height:58px;
  padding:7px 10px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:8px;
}

.chat-back{
  width:30px;
  height:36px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:1.55rem;
  line-height:1;
}

.chat-header-avatar{
  width:39px;
  height:39px;
  flex-basis:39px;
}

.chat-header-copy{
  min-width:0;
  display:grid;
  gap:1px;
}

.chat-header-copy strong{
  overflow:hidden;
  color:var(--text);
  font-size:.69rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.chat-header-copy small{
  color:var(--muted);
  font-size:.53rem;
}

.message-request-banner{
  padding:10px 11px;
  border-bottom:1px solid var(--border);
  background:#fbf6eb;
}

.message-request-banner > div:first-child{
  display:grid;
  gap:2px;
}

.message-request-banner strong{
  color:#75541b;
  font-size:.62rem;
}

.message-request-banner p{
  margin:0;
  color:#8c713f;
  font-size:.54rem;
  line-height:1.35;
}

.message-request-actions{
  margin-top:8px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.message-request-actions button{
  min-height:33px;
  border-radius:10px;
  font-size:.58rem;
  font-weight:850;
}

.request-reject{
  border:1px solid #dfd4bd;
  background:#fff;
  color:#735f3b;
}

.request-accept{
  border:1px solid var(--primary);
  background:var(--primary);
  color:#fff;
}

.message-request-actions button:disabled{
  opacity:.5;
}

.outgoing-request-note{
  padding:8px 11px;
  border-bottom:1px solid var(--border);
  background:#f7faf9;
  color:var(--muted);
  display:flex;
  align-items:flex-start;
  gap:7px;
}

.outgoing-request-note span{
  color:var(--warning);
  font-size:.8rem;
}

.outgoing-request-note p{
  margin:0;
  font-size:.54rem;
  line-height:1.4;
}

.chat-message-scroll{
  min-height:260px;
  flex:1;
  padding:12px 10px 14px;
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#f7f9f8;
}

.chat-message-row{
  width:100%;
  margin:5px 0;
  display:flex;
}

.chat-message-row.mine{
  justify-content:flex-end;
}

.chat-bubble{
  max-width:78%;
  padding:8px 10px 6px;
  border-radius:15px;
  box-shadow:0 1px 2px rgba(18,51,46,.04);
}

.chat-bubble p{
  margin:0;
  font-size:.64rem;
  line-height:1.42;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.chat-bubble time{
  display:block;
  margin-top:3px;
  text-align:right;
  font-size:.45rem;
}

.chat-bubble.mine{
  border-bottom-right-radius:5px;
  background:var(--primary);
  color:#fff;
}

.chat-bubble.mine time{
  color:rgba(255,255,255,.72);
}

.chat-bubble.theirs{
  border:1px solid var(--border);
  border-bottom-left-radius:5px;
  background:#fff;
  color:var(--text);
}

.chat-bubble.theirs time{
  color:var(--muted);
}

.chat-no-messages{
  margin:30px auto;
  color:var(--muted);
  font-size:.58rem;
  text-align:center;
}

.chat-loading{
  min-height:150px;
  display:grid;
  place-items:center;
}

.chat-composer{
  min-height:57px;
  padding:7px 8px 8px;
  border-top:1px solid var(--border);
  background:var(--surface);
  display:flex;
  align-items:flex-end;
  gap:7px;
}

.chat-composer textarea{
  min-width:0;
  min-height:39px;
  max-height:110px;
  flex:1;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:18px;
  outline:0;
  resize:none;
  background:#f7faf9;
  color:var(--text);
  font:inherit;
  font-size:.63rem;
  line-height:1.35;
}

.chat-composer textarea:focus{
  border-color:rgba(20,122,114,.4);
  box-shadow:0 0 0 3px rgba(20,122,114,.07);
}

.chat-composer button{
  width:39px;
  height:39px;
  flex:0 0 39px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:grid;
  place-items:center;
}

.chat-composer button:disabled,
.chat-composer textarea:disabled{
  opacity:.5;
}

/* Nuevo mensaje */

.new-message-layer{
  position:fixed;
  inset:0;
  z-index:6200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.new-message-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(9,25,22,.45);
  backdrop-filter:blur(2px);
}

.new-message-sheet{
  position:relative;
  z-index:1;
  width:min(100%,var(--max));
  max-height:78dvh;
  padding-bottom:max(16px, env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 -18px 55px rgba(7,26,23,.24);
  overflow-y:auto;
}

.new-message-sheet > header{
  min-height:49px;
  padding:0 12px 0 15px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.new-message-sheet > header strong{
  font-size:.72rem;
}

.new-message-sheet > header button{
  width:31px;
  height:31px;
  padding:0;
  border:0;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--text);
  font-size:1.1rem;
}

.message-user-search{
  padding:13px 13px 8px;
  display:grid;
  gap:6px;
}

.message-user-search > span,
.first-message-field > span{
  color:var(--text);
  font-size:.6rem;
  font-weight:850;
}

.message-user-search > div{
  min-height:41px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#f8faf9;
  display:flex;
  align-items:center;
  gap:2px;
}

.message-user-search > div > span{
  color:var(--primary);
  font-size:.73rem;
  font-weight:900;
}

.message-user-search input{
  min-width:0;
  flex:1;
  height:39px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:.65rem;
}

.message-user-search small{
  color:var(--muted);
  font-size:.5rem;
}

.message-user-results{
  padding:2px 10px 8px;
}

.message-user-result{
  width:100%;
  min-height:58px;
  padding:7px 6px;
  border:0;
  border-bottom:1px solid var(--border);
  background:transparent;
  color:var(--text);
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
}

.message-user-result:last-child{
  border-bottom:0;
}

.message-user-result > span:nth-child(2){
  min-width:0;
  flex:1;
  display:grid;
  gap:2px;
}

.message-user-result strong{
  overflow:hidden;
  font-size:.65rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.message-user-result small{
  color:var(--muted);
  font-size:.53rem;
}

.message-user-result i{
  color:var(--muted);
  font-size:1rem;
  font-style:normal;
}

.message-search-loading,
.message-search-empty,
.message-search-hint{
  min-height:95px;
  margin:0;
  padding:20px;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:.57rem;
  text-align:center;
}

.selected-recipient{
  margin:12px 12px 0;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8faf9;
  display:flex;
  align-items:center;
  gap:9px;
}

.selected-recipient > div{
  min-width:0;
  flex:1;
  display:grid;
  gap:2px;
}

.selected-recipient strong{
  font-size:.65rem;
}

.selected-recipient small{
  color:var(--muted);
  font-size:.52rem;
}

.selected-recipient > button{
  min-height:29px;
  padding:0 7px;
  border:0;
  border-radius:8px;
  background:var(--primary-soft);
  color:var(--primary-dark);
  font-size:.52rem;
  font-weight:800;
}

.first-message-field{
  padding:12px;
  display:grid;
  gap:6px;
}

.first-message-field textarea{
  width:100%;
  min-height:96px;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:13px;
  outline:0;
  resize:vertical;
  background:#f8faf9;
  color:var(--text);
  font:inherit;
  font-size:.64rem;
  line-height:1.4;
}

.send-message-request{
  width:calc(100% - 24px);
  min-height:40px;
  margin:0 12px;
  border:0;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-size:.62rem;
  font-weight:850;
}

.send-message-request:disabled{
  opacity:.5;
}

/* Modo oscuro */

html[data-theme="dark"] .message-tabs,
html[data-theme="dark"] .new-message-button,
html[data-theme="dark"] .conversation-list,
html[data-theme="dark"] .messages-empty,
html[data-theme="dark"] .chat-view,
html[data-theme="dark"] .new-message-sheet{
  background:#111b19;
  border-color:#2a3c39;
}

html[data-theme="dark"] .message-tabs button.active,
html[data-theme="dark"] .new-message-button:active,
html[data-theme="dark"] .conversation-row:active{
  background:#19322f;
}

html[data-theme="dark"] .message-tabs button.active,
html[data-theme="dark"] .conversation-preview b{
  color:#8bd7ce;
}

html[data-theme="dark"] .conversation-row{
  border-color:#2a3c39;
}

html[data-theme="dark"] .conversation-name-line em{
  background:#352c19;
  color:#e2bf77;
}

html[data-theme="dark"] .message-request-banner{
  background:#2c271b;
  border-color:#413921;
}

html[data-theme="dark"] .message-request-banner strong{
  color:#ebc979;
}

html[data-theme="dark"] .message-request-banner p{
  color:#c7af7b;
}

html[data-theme="dark"] .request-reject{
  border-color:#51482f;
  background:#1a211f;
  color:#dbc8a2;
}

html[data-theme="dark"] .outgoing-request-note,
html[data-theme="dark"] .chat-message-scroll,
html[data-theme="dark"] .message-user-search > div,
html[data-theme="dark"] .selected-recipient,
html[data-theme="dark"] .first-message-field textarea,
html[data-theme="dark"] .chat-composer textarea{
  background:#14201e;
  border-color:#2a3c39;
}

html[data-theme="dark"] .chat-bubble.theirs{
  background:#182421;
  border-color:#2b3b38;
}

html[data-theme="dark"] .chat-composer{
  background:#111b19;
  border-color:#2a3c39;
}

html[data-theme="dark"] .new-message-sheet > header,
html[data-theme="dark"] .message-user-result{
  border-color:#2a3c39;
}


/* ==========================================================
   V54 — mensajes no leídos
   ========================================================== */

:root{
  --message-unread:#D64F73;
  --message-unread-soft:rgba(214,79,115,.11);
}

.message-unread-tab-count{
  min-width:17px;
  height:17px;
  padding:0 5px;
  border-radius:999px;
  background:var(--message-unread);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:.47rem;
  font-weight:900;
  line-height:1;
}

.conversation-row.is-unread .conversation-name-line strong{
  font-weight:950;
}

.conversation-row.is-unread .conversation-preview{
  color:var(--text);
  font-weight:760;
}

.conversation-row.is-unread time{
  color:var(--message-unread);
  font-weight:800;
}

.conversation-meta{
  align-self:stretch;
  min-width:34px;
  padding-top:3px;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
}

.conversation-meta time{
  margin:0;
}

.conversation-unread-badge{
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  background:var(--message-unread);
  color:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 3px 9px rgba(214,79,115,.24);
  font-size:.49rem;
  font-weight:950;
  line-height:1;
}

/*
  Badge global de la pestaña inferior Mensajes.
  No altera navigation.js ni el diseño aprobado de la barra.
*/
.nav-item[data-route="mensajes"]{
  position:relative;
}

.messages-nav-badge{
  position:absolute;
  top:0;
  left:calc(50% + 7px);
  z-index:2;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:2px solid var(--surface);
  border-radius:999px;
  background:var(--message-unread);
  color:#fff;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  box-shadow:0 2px 8px rgba(214,79,115,.24);
  font-size:.43rem;
  font-weight:950;
  line-height:1;
  pointer-events:none;
}

html[data-theme="dark"] .message-unread-tab-count,
html[data-theme="dark"] .conversation-unread-badge,
html[data-theme="dark"] .messages-nav-badge{
  background:var(--message-unread);
  color:#fff;
}

html[data-theme="dark"] .messages-nav-badge{
  border-color:#111817;
}


/* ==========================================================
   V55 — compositor fijo y scroll solo en los mensajes
   ========================================================== */

/*
  Cuando hay un chat abierto, la página ya no necesita el espacio extra
  reservado debajo para contenido largo: la propia tarjeta termina justo
  encima de la navegación inferior.
*/
.messages-page.is-chat-open{
  padding-bottom:0;
  overflow:hidden;
}

/*
  La altura definitiva se calcula también en JS contra la posición REAL
  de .bottom-nav. Este valor queda como respaldo antes de esa medición.
*/
.chat-view{
  height:calc(100dvh - var(--nav-h) - 64px);
  min-height:300px;
  max-height:none;
  overflow:hidden;
}

/* Encabezado siempre visible. */
.chat-header,
.message-request-banner,
.outgoing-request-note{
  flex:0 0 auto;
}

/*
  Esta es la única zona que crece y hace scroll.
  min-height:0 es crítico en un contenedor flex para impedir que los
  mensajes empujen el compositor fuera de la pantalla.
*/
.chat-message-scroll{
  min-height:0;
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

/*
  El compositor forma parte del marco fijo del chat, no del historial.
  Los mensajes se desplazan detrás de esta frontera, nunca la empujan.
*/
.chat-composer{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  width:100%;
  margin:0;
  background:var(--surface);
  box-shadow:0 -4px 14px rgba(18,51,46,.04);
}

/* El error tampoco debe alterar el crecimiento del historial. */
.chat-error{
  flex:0 0 auto;
  margin:0;
  border-radius:0;
}

/* En modo oscuro se conserva la separación sutil. */
html[data-theme="dark"] .chat-composer{
  box-shadow:0 -4px 14px rgba(0,0,0,.12);
}


/* ==========================================================
   V56 — Seguir y perfil público desde Mensajes
   ========================================================== */

.chat-profile-link{
  min-width:0;
  flex:1;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  display:flex;
  align-items:center;
  gap:8px;
  text-align:left;
}

.chat-profile-link:active{
  opacity:.78;
}

.chat-profile-link .chat-header-copy{
  min-width:0;
  flex:1;
}

.chat-follow-button{
  min-width:62px;
  height:30px;
  flex:0 0 auto;
  padding:0 10px;
  border:1px solid var(--primary);
  border-radius:10px;
  background:var(--primary);
  color:#fff;
  font-size:.54rem;
  font-weight:850;
}

.chat-follow-button.is-following{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
}

.chat-follow-button:disabled{
  opacity:.55;
}

.message-public-profile-open{
  overflow:hidden;
}

.message-public-profile-overlay{
  position:fixed;
  inset:0;
  z-index:145;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  opacity:1;
}

.message-public-profile-overlay.is-hidden{
  display:none;
}

.message-public-profile-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(7,19,17,.56);
  backdrop-filter:blur(3px);
}

.message-public-profile-sheet{
  position:relative;
  z-index:1;
  width:min(100%,var(--max));
  height:min(91dvh,760px);
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:22px 22px 0 0;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 -18px 52px rgba(7,19,17,.28);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.message-public-profile-header{
  min-height:48px;
  flex:0 0 48px;
  padding:0 12px;
  border-bottom:1px solid var(--border);
  display:grid;
  grid-template-columns:36px 1fr 36px;
  align-items:center;
}

.message-public-profile-header strong{
  font-size:.72rem;
  text-align:center;
}

.message-public-profile-back{
  width:32px;
  height:32px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text);
  display:grid;
  place-items:center;
  font-size:1.55rem;
  line-height:1;
}

.message-public-profile-content{
  min-height:0;
  flex:1;
  padding:12px 12px max(22px,env(safe-area-inset-bottom));
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.message-public-profile-head{
  padding:1px 2px 13px;
}

.message-public-profile-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.message-public-profile-avatar{
  width:68px;
  height:68px;
  flex:0 0 68px;
  border-radius:50%;
  background:var(--primary-soft);
  color:var(--primary);
  display:grid;
  place-items:center;
  overflow:hidden;
  font-size:.9rem;
  font-weight:900;
}

.message-public-profile-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.message-public-follow{
  min-width:88px;
  height:34px;
  padding:0 15px;
  border:1px solid var(--primary);
  border-radius:11px;
  background:var(--primary);
  color:#fff;
  font-size:.59rem;
  font-weight:900;
}

.message-public-follow.is-following{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
}

.message-public-follow:disabled{
  opacity:.55;
}

.message-public-profile-head h2{
  margin:10px 0 1px;
  color:var(--text);
  font-size:.92rem;
}

.message-public-handle{
  color:var(--primary);
  font-size:.6rem;
  font-weight:800;
}

.message-public-bio{
  margin:9px 0 0;
  color:var(--text);
  font-size:.63rem;
  line-height:1.45;
  white-space:pre-wrap;
}

.message-public-location{
  margin-top:8px;
  color:var(--muted);
  font-size:.57rem;
}

.message-public-stats{
  margin-top:13px;
  min-height:58px;
  border:1px solid var(--border);
  border-radius:16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
}

.message-public-stats div{
  min-width:0;
  display:grid;
  gap:2px;
  text-align:center;
}

.message-public-stats strong{
  color:var(--text);
  font-size:.7rem;
}

.message-public-stats small{
  color:var(--muted);
  font-size:.51rem;
}

.message-public-posts-title{
  min-height:38px;
  margin-top:2px;
  border-top:1px solid var(--border);
  border-bottom:2px solid var(--primary);
  display:flex;
  align-items:center;
  justify-content:center;
}

.message-public-posts-title strong{
  color:var(--primary);
  font-size:.61rem;
}

.message-public-wall{
  margin-top:8px;
}

.message-public-empty{
  min-height:160px;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:17px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  text-align:center;
  color:var(--muted);
}

.message-public-empty > span{
  color:var(--primary);
  font-size:1.25rem;
}

.message-public-empty strong{
  color:var(--text);
  font-size:.68rem;
}

.message-public-empty p,
.message-public-error{
  margin:0;
  color:var(--muted);
  font-size:.56rem;
}

.message-public-loading{
  min-height:80px;
  display:grid;
  place-items:center;
}

.message-public-loading span{
  width:23px;
  height:23px;
  border:2px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:messagePublicSpin .75s linear infinite;
}

@keyframes messagePublicSpin{
  to{transform:rotate(360deg)}
}

/*
  El visor de publicación está por encima del perfil público.
  Reutiliza perfil.css para publicación, patitas, comentarios y Guardar.
*/
.messages-page ~ .post-viewer-overlay{
  z-index:165;
}

html[data-theme="dark"] .chat-follow-button.is-following,
html[data-theme="dark"] .message-public-follow.is-following{
  background:#14201e;
  border-color:#30433f;
  color:#dce6e3;
}

html[data-theme="dark"] .message-public-profile-sheet{
  background:#101917;
  border-color:#2a3c39;
}


/* ==========================================================
   V79 — Mensajes avanzados
   ========================================================== */

.chat-header{overflow:visible}
.chat-options{position:relative;flex:0 0 auto}
.chat-options-trigger{width:31px;height:31px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:2.5px}
.chat-options-trigger span{width:3px;height:3px;border-radius:50%;background:currentColor}
.chat-options-trigger:active,.chat-options-trigger.is-open{background:var(--primary-soft);color:var(--text)}
.chat-options-menu{position:absolute;top:35px;right:0;z-index:20;width:180px;padding:5px;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:0 14px 36px rgba(11,35,31,.18)}
.chat-options-menu button{width:100%;min-height:39px;padding:0 9px;border:0;border-radius:9px;background:transparent;color:var(--text);display:flex;align-items:center;gap:8px;text-align:left;font-size:.58rem;font-weight:780}
.chat-options-menu button:active{background:var(--primary-soft)}
.chat-options-menu button.danger{color:#c74355}
.chat-blocked-banner{flex:0 0 auto;padding:9px 12px;border-bottom:1px solid var(--border);background:rgba(199,67,85,.045);text-align:center}
.chat-blocked-banner strong{display:block;color:var(--text);font-size:.61rem}
.chat-blocked-banner p{margin:2px auto 0;color:var(--muted);font-size:.51rem;line-height:1.35}
.chat-message-row{position:relative;transition:background .18s ease}
.chat-message-row.is-highlighted{background:rgba(214,79,115,.08);border-radius:10px}
.chat-reply-action{width:26px;height:26px;flex:0 0 26px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;font-size:.82rem;opacity:.62}
.chat-message-row.mine .chat-reply-action{order:2}
.chat-reply-action:active{background:var(--primary-soft);opacity:1}
@media (hover:hover){.chat-reply-action{opacity:0}.chat-message-row:hover .chat-reply-action{opacity:.7}}
.chat-reply-quote{width:100%;margin:0 0 6px;padding:6px 7px;border:0;border-left:3px solid currentColor;border-radius:7px;background:rgba(255,255,255,.18);color:inherit;display:grid;gap:1px;text-align:left}
.chat-bubble.theirs .chat-reply-quote{background:rgba(26,115,105,.055)}
.chat-reply-quote span{font-size:.48rem;font-weight:900}
.chat-reply-quote small{max-width:210px;overflow:hidden;font-size:.49rem;opacity:.82;text-overflow:ellipsis;white-space:nowrap}

/* ==========================================================
   Responsivo — Fase 3: Mensajes en escritorio.
   Lista de conversaciones + chat abierto simultáneos (dos paneles).
   Reutiliza el mismo HTML de .conversation-list y .chat-view; solo
   cambia el empaquetado y algunos ajustes cosméticos.
   ========================================================== */
@media(min-width:1024px){
  html.is-desktop .messages-page{
    overflow:hidden;
  }

  .messages-desktop-grid{
    display:grid;
    grid-template-columns:minmax(280px,360px) 1fr;
    align-items:start;
  }

  .messages-list-pane{
    position:sticky;
    top:74px;
    max-height:calc(100dvh - 90px);
    overflow-y:auto;
    padding-right:16px;
    border-right:1px solid var(--border);
  }

  .messages-chat-pane{
    min-width:0;
    padding-left:16px;
  }

  .messages-chat-pane .chat-view{
    border:0;
    border-radius:0;
    background:transparent;
  }

  .messages-chat-pane .chat-back{
    display:none;
  }

  .messages-chat-empty{
    height:calc(100dvh - 90px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:10px;
    color:var(--muted);
    text-align:center;
  }

  .messages-chat-empty span{
    width:56px;height:56px;
    border-radius:50%;
    background:var(--primary-soft);
    color:var(--primary);
    display:flex;align-items:center;justify-content:center;
  }

  .messages-chat-empty p{
    margin:0;
    max-width:220px;
    font-size:.8rem;
    line-height:1.4;
  }
}

html[data-theme="dark"] .messages-chat-empty span{
  background:var(--theme-accent-soft);
  color:var(--theme-accent);
}

@media(min-width:1024px){
  html[data-theme="dark"] .messages-chat-pane .chat-view{
    background:transparent;
  }
}
.chat-photo-grid{width:min(250px,62vw);margin-bottom:5px;display:grid;grid-template-columns:1fr;gap:3px;overflow:hidden;border-radius:10px}
.chat-photo-grid.count-2,.chat-photo-grid.count-3,.chat-photo-grid.count-4{grid-template-columns:repeat(2,1fr)}
.chat-photo{min-width:0;aspect-ratio:1/1;padding:0;border:0;background:#0d1715;overflow:hidden}
.chat-photo:first-child:last-child{aspect-ratio:4/5;max-height:290px}
.chat-photo img{width:100%;height:100%;object-fit:cover;display:block}
.chat-bubble-meta{margin-top:2px;display:flex;align-items:center;justify-content:flex-end;gap:5px}
.chat-bubble-meta time{margin:0}
.chat-seen{min-width:0;color:inherit;font-size:.43rem;font-weight:800;opacity:0}
.chat-seen.is-seen{opacity:.72}
.chat-typing-indicator{min-height:0;height:0;padding:0 12px;flex:0 0 auto;overflow:hidden;color:var(--muted);font-size:.49rem;font-style:italic;transition:height .15s ease,padding .15s ease}
.chat-typing-indicator.is-visible{height:22px;padding-top:4px}
.chat-compose-zone{position:relative;z-index:4;flex:0 0 auto;background:var(--surface);border-top:1px solid var(--border)}
.chat-compose-zone .chat-composer{border-top:0;box-shadow:none}
.chat-reply-composer{min-height:43px;padding:7px 10px 5px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.chat-reply-composer>div{min-width:0;padding-left:8px;border-left:3px solid var(--primary);display:grid;gap:1px}
.chat-reply-composer strong{color:var(--primary);font-size:.52rem}
.chat-reply-composer small{max-width:280px;overflow:hidden;color:var(--muted);font-size:.5rem;text-overflow:ellipsis;white-space:nowrap}
.chat-reply-composer>button{width:27px;height:27px;padding:0;border:0;border-radius:50%;background:var(--primary-soft);color:var(--muted);display:grid;place-items:center;font-size:.9rem}
.chat-selected-photos{padding:7px 9px 3px;display:flex;gap:6px;overflow-x:auto}
.chat-selected-photo{position:relative;width:62px;height:62px;flex:0 0 62px;border-radius:10px;background:#eef3f1;overflow:hidden}
.chat-selected-photo img{width:100%;height:100%;object-fit:cover}
.chat-selected-photo button{position:absolute;top:3px;right:3px;width:21px;height:21px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(11,22,20,.72);color:#fff;display:grid;place-items:center;font-size:.8rem}
.chat-composer{gap:5px}
.chat-composer-tool{width:31px;height:31px;flex:0 0 31px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--primary);display:grid;place-items:center}
.chat-composer-tool:active{background:var(--primary-soft)}
.chat-composer-tool.emoji{font-size:1.05rem;line-height:1}
.chat-send-button{flex:0 0 auto}
.chat-send-loading{width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:chatSendSpin .7s linear infinite}
@keyframes chatSendSpin{to{transform:rotate(360deg)}}
.chat-emoji-picker{position:absolute;right:45px;bottom:53px;z-index:12;width:230px;max-height:190px;padding:8px;border:1px solid var(--border);border-radius:15px;background:var(--surface);box-shadow:0 14px 36px rgba(10,33,29,.18);display:grid;grid-template-columns:repeat(8,1fr);gap:2px;overflow-y:auto}
.chat-emoji-picker button{width:26px;height:28px;padding:0;border:0;border-radius:7px;background:transparent;font-size:1rem}
.chat-emoji-picker button:active{background:var(--primary-soft)}
.chat-confirm-layer{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:18px}
.chat-confirm-backdrop{position:absolute;inset:0;border:0;background:rgba(7,19,17,.54);backdrop-filter:blur(2px)}
.chat-confirm-dialog{position:relative;z-index:1;width:min(100%,300px);padding:16px;border:1px solid var(--border);border-radius:17px;background:var(--surface);text-align:center;box-shadow:0 18px 50px rgba(7,19,17,.28)}
.chat-confirm-dialog>strong{display:block;font-size:.72rem}
.chat-confirm-dialog>p{margin:6px 0 14px;color:var(--muted);font-size:.55rem;line-height:1.4}
.chat-confirm-dialog>div{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.chat-confirm-dialog button{min-height:35px;border-radius:10px;font-size:.57rem;font-weight:820}
.chat-confirm-cancel{border:1px solid var(--border);background:var(--surface);color:var(--text)}
.chat-confirm-dialog button.danger{border:1px solid #c74355;background:#c74355;color:#fff}
.chat-confirm-dialog button.primary{border:1px solid var(--primary);background:var(--primary);color:#fff}
.chat-image-viewer{position:fixed;inset:0;z-index:8800;display:grid;place-items:center;padding:18px}
.chat-image-viewer-backdrop{position:absolute;inset:0;border:0;background:rgba(3,9,8,.91)}
.chat-image-viewer>img{position:relative;z-index:1;max-width:min(100%,760px);max-height:90dvh;object-fit:contain}
.chat-image-viewer-close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:2;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;font-size:1.15rem}
html[data-theme="dark"] .chat-options-menu,html[data-theme="dark"] .chat-confirm-dialog,html[data-theme="dark"] .chat-emoji-picker{background:#101917;border-color:#2a3c39}
html[data-theme="dark"] .chat-selected-photo{background:#172522}
html[data-theme="dark"] .chat-blocked-banner{background:rgba(199,67,85,.055)}


/* Especificidad sobre las reglas base de .chat-composer button */
.chat-composer .chat-composer-tool{
  width:31px;
  height:31px;
  flex:0 0 31px;
  background:transparent;
  color:var(--primary);
}

.chat-composer .chat-composer-tool:active{
  background:var(--primary-soft);
}

.chat-composer .chat-send-button{
  width:39px;
  height:39px;
  flex:0 0 39px;
  background:var(--primary);
  color:#fff;
}

/* ==========================================================
   V82 — Seguridad en Mensajes
   ========================================================== */
.chat-message-safety{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:grid;place-items:center;font-weight:900;opacity:.6}.chat-message-row.mine .chat-message-safety{display:none}.chat-message-safety-menu{position:absolute;right:30px;top:0;z-index:15;width:155px;padding:5px;border:1px solid var(--border);border-radius:11px;background:var(--surface);box-shadow:0 12px 28px rgba(7,19,17,.18)}.chat-message-safety-menu button{width:100%;min-height:34px;border:0;border-radius:8px;background:transparent;color:#c74355;text-align:left;font-size:.52rem;font-weight:800}
.chat-evidence-lock{padding:11px;text-align:center}.chat-evidence-lock strong{display:block;font-size:.61rem}.chat-evidence-lock p{margin:3px auto 0;max-width:320px;color:var(--muted);font-size:.5rem;line-height:1.4}.public-profile-safety-tools{position:relative;margin-left:auto}.public-profile-safety-trigger{width:31px;height:31px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:2.5px}.public-profile-safety-trigger span{width:3px;height:3px;border-radius:50%;background:currentColor}.public-profile-safety-menu{position:absolute;top:35px;right:0;z-index:20;width:175px;padding:5px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 12px 30px rgba(7,19,17,.18)}.public-profile-safety-menu button{width:100%;min-height:36px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;font-size:.53rem;font-weight:780}.public-profile-safety-menu button.danger{color:#c74355}
#message-safety-report-overlay{position:fixed;inset:0;z-index:9400;display:flex;align-items:flex-end;justify-content:center}#message-safety-report-overlay .safety-report-backdrop{position:absolute;inset:0;border:0;background:rgba(7,19,17,.62);backdrop-filter:blur(3px)}#message-safety-report-overlay .safety-report-sheet{position:relative;z-index:1;width:min(100%,var(--max));max-height:91dvh;border:1px solid var(--border);border-bottom:0;border-radius:22px 22px 0 0;background:var(--surface);color:var(--text);overflow:hidden}#message-safety-report-overlay .safety-report-sheet>header{min-height:51px;padding:0 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}#message-safety-report-overlay .safety-report-sheet>header>div{display:grid;gap:2px}#message-safety-report-overlay .safety-report-sheet>header strong{font-size:.7rem}#message-safety-report-overlay .safety-report-sheet>header small{color:var(--muted);font-size:.49rem}#message-safety-report-overlay .safety-report-sheet>header>button{width:31px;height:31px;padding:0;border:0;border-radius:50%;background:var(--primary-soft);color:var(--text)}#message-safety-report-overlay .safety-report-body{padding:13px;overflow-y:auto}#message-safety-report-overlay .safety-evidence-note{padding:10px;border:1px solid rgba(214,79,115,.18);border-radius:14px;background:rgba(214,79,115,.045)}#message-safety-report-overlay .safety-evidence-note strong{font-size:.6rem}#message-safety-report-overlay .safety-evidence-note p{margin:3px 0 0;color:var(--muted);font-size:.51rem}#message-safety-report-overlay label{margin-top:11px;display:grid;gap:5px}#message-safety-report-overlay label>span{font-size:.56rem;font-weight:820}#message-safety-report-overlay select,#message-safety-report-overlay textarea{width:100%;padding:9px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font:inherit;font-size:.57rem}#message-safety-report-overlay .safety-report-submit{width:100%;min-height:39px;margin-top:13px;border:0;border-radius:11px;background:#D64F73;color:#fff;font-size:.59rem;font-weight:900}
html[data-theme="dark"] .chat-message-safety-menu,html[data-theme="dark"] .public-profile-safety-menu{background:#101917;border-color:#2a3c39}