/* ═══════════════════════════════════════════════════════════════════════
   MENSAJES (js/mensajes.js; mockups/amigos-chat.html, 2026-11-08)
   Pantalla completa encima de todo (también de la barra), clara, con los tokens de piel.css: un solo acento, tinta y grises.
   Mis burbujas en tinta, las suyas en superficie. Nada por debajo de 12 px. Reusa .am-ava, .am-btn, .am-vacio y .am-hoja de amigos.css.
   ═══════════════════════════════════════════════════════════════════════ */
.ms-panel { position: fixed; left: var(--lado, 0px); right: 0; top: 0; bottom: 0; z-index: 1300; display: none; flex-direction: column;
  background: var(--bg); color: var(--ink); }
.ms-panel.abierto { display: flex; }
body.ms-abierto { overflow: hidden; }
.ms-panel .trazo { width: 20px; height: 20px; }

.ms-cab { flex: none; display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--sa-arriba, 0px)) 10px 10px; background: var(--bg);
  border-bottom: 1px solid var(--line); min-height: 60px; }
.ms-tit { font-size: 20px; font-weight: 500; }
.ms-icono { width: 42px; height: 42px; border: 0; border-radius: 50%; background: none; color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.ms-icono:hover { background: var(--field); }
.ms-quien { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.ms-quien .am-ava { width: 38px; height: 38px; }
.ms-quien .tx { min-width: 0; line-height: 1.25; }
.ms-quien b { display: block; font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-quien small { display: block; font-size: 12px; color: var(--muted); }

.ms-pestanas { flex: none; display: flex; gap: 6px; padding: 10px 16px 6px; }
.ms-pestanas button { min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--field); color: var(--ink); font: inherit; font-size: 14px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ms-pestanas button.on { background: var(--ink); color: var(--surf); }
.ms-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--acc); color: #fff;
  font-size: 12px; font-weight: 500; }

.ms-cuerpo { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 16px calc(24px + var(--sa-abajo, 0px)); max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ms-cuerpo > .spinner { margin: 48px auto; }
.ms-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 8px; }
.ms-aviso .trazo { width: 16px; height: 16px; flex: none; margin-top: 1px; }

.ms-fila { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ms-fila + .ms-fila { border-top: 1px solid var(--line); }
.ms-fila .am-ava { width: 50px; height: 50px; }
.ms-fila .tx { flex: 1; min-width: 0; line-height: 1.3; }
.ms-fila .tx b { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-fila .tx small { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-fila.nuevo .tx small { color: var(--ink); font-weight: 500; }
.ms-fila .lado { display: grid; justify-items: end; gap: 4px; flex: none; }
.ms-fila time { font-size: 12px; color: var(--muted); }

/* El chat */
.ms-lista { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 4px;
  max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ms-dia { align-self: center; margin: 10px 0 6px; font-size: 12px; color: var(--muted); text-transform: capitalize; }
.ms-globo { max-width: 78%; padding: 8px 12px 6px; border-radius: 18px; line-height: 1.4; }
.ms-globo p { margin: 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ms-globo time { display: block; font-size: 12px; margin-top: 2px; opacity: .7; text-align: right; }
.ms-globo.mio { align-self: flex-end; background: var(--ink); color: var(--surf); border-bottom-right-radius: 6px; }
.ms-globo.suyo { align-self: flex-start; background: var(--surf); box-shadow: var(--csh); border-bottom-left-radius: 6px; }
.ms-visto { align-self: flex-end; font-size: 12px; color: var(--muted); margin: -1px 4px 2px; }
.ms-tarjeta { display: flex; gap: 10px; align-items: flex-start; margin: 8px auto; max-width: 340px; padding: 12px 14px; border-radius: 14px; background: var(--surf);
  font-size: 13px; line-height: 1.45; color: var(--muted); }
.ms-tarjeta p { margin: 0; }
.ms-tarjeta .trazo { width: 18px; height: 18px; flex: none; }
.ms-link { border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; padding: 6px; }
.ms-antes { align-self: center; }

.ms-escribir { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(10px + var(--sa-abajo, 0px)); border-top: 1px solid var(--line); background: var(--bg);
  max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ms-escribir textarea { flex: 1; min-height: 44px; max-height: 132px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--surf);
  color: var(--ink); font: inherit; font-size: 16px; line-height: 1.35; resize: none; box-sizing: border-box; overflow-y: hidden; }
.ms-escribir textarea:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.ms-enviar { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.ms-enviar:disabled { opacity: .6; }
.ms-espera { flex: none; padding: 14px 16px calc(16px + var(--sa-abajo, 0px)); border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--muted); line-height: 1.45; }

.ms-decidir { flex: none; padding: 14px 16px calc(12px + var(--sa-abajo, 0px)); border-top: 1px solid var(--line); background: var(--surf); text-align: center;
  max-width: 640px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ms-decidir p { margin: 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
.ms-decidir p b { display: block; font-size: 15px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.ms-decidir-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ms-decidir-btns .am-btn { margin: 0; }

/* El punto de la pestaña Amigos (hay chats sin leer o solicitudes) */
#tab-yo { position: relative; }
.ms-punto { position: absolute; top: 6px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 2px var(--bg); }
.ms-punto[hidden] { display: none; }

/* En Amigos: el buscador, el botón de mensajes y las solicitudes */
.am-cab .am-mensajes { margin-left: auto; position: relative; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--surf); box-shadow: var(--csh);
  color: var(--ink); display: grid; place-items: center; cursor: pointer; flex: none; }
.am-mensajes .trazo { width: 20px; height: 20px; }
.am-mensajes .ms-n { position: absolute; top: -4px; right: -4px; }
.am-buscar { position: relative; margin: 2px 0 6px; }
.am-buscar input { width: 100%; min-height: 46px; padding: 0 44px 0 42px; border: 1px solid var(--line); border-radius: 999px; background: var(--surf); color: var(--ink);
  font: inherit; font-size: 16px; box-sizing: border-box; }
.am-buscar input:focus { outline: 2px solid var(--acc); outline-offset: -1px; }
.am-buscar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } /* ya está nuestra X */
.am-buscar > .trazo { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.am-buscar .am-x { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); }
.am-buscar .am-x[hidden] { display: none; }
.am-btn.sec.chico { margin-top: 0; }
.am-fila-link + .am-fila-link { margin-top: 0; border-top: 0; }