/* Chat del salón. Mismo lenguaje que el vestidor: píldoras, fondo --suelo, títulos en Hue y respuesta en 120–230 ms (--rapida y --suelo vienen de community.css). */
#conversaciones[hidden]{display:none}
#conversaciones{white-space:nowrap}
#total-chats:not(:empty){display:inline-block;min-width:20px;margin-left:4px;padding:1px 6px;border-radius:999px;background:var(--coral);color:#fff;font-size:12px;font-weight:600;line-height:18px;text-align:center}
.persona .estado-persona{font-size:12px;color:var(--suave);margin-top:12px}
.persona .estado-persona::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--borde)}
.persona .estado-persona[data-activa=true]::before{background:#386145}
.persona button{margin-top:10px;min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:var(--azul);color:#fff;font-weight:600;transition:transform .12s var(--rapida)}
.persona button:active,.dialogo-social button:active{transform:scale(.96)}

/* Los demás en la sala: nombre sobre cada personaje; al tocarlo se abre su ficha. */
#otros{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sobre-otro{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.sobre-otro[hidden]{display:none}.sobre-otro:has(.dice-otro:not([hidden])){z-index:1}
.dice-otro{margin:0;max-width:220px;padding:9px 14px;border-radius:18px 18px 18px 6px;background:var(--azul);color:#fff;font-size:14px;line-height:1.35;overflow-wrap:anywhere;box-shadow:0 1px 2px rgb(0 0 0 / .12),0 6px 16px rgb(0 0 0 / .18);animation:decir .2s var(--rapida)}.dice-otro[hidden]{display:none}
@keyframes decir{from{opacity:0;transform:translateY(6px) scale(.96)}}@media(prefers-reduced-motion:reduce){.dice-otro{animation:none}}
.nombre-otro,.rotulo-local{position:relative;pointer-events:auto;display:grid;gap:1px;justify-items:start;text-align:left;min-height:0;padding:6px 12px 6px 10px;border:0;border-radius:14px;background:var(--papel);font-size:13px;line-height:1.2;max-width:210px;box-shadow:0 1px 2px rgb(0 0 0 / .12),0 4px 12px rgb(0 0 0 / .14)}
:is(.nombre-otro,.rotulo-local) strong,:is(.nombre-otro,.rotulo-local) small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(.nombre-otro,.rotulo-local) strong{font-weight:600}:is(.nombre-otro,.rotulo-local) small{font-size:11px;color:var(--suave)}
:is(.nombre-otro,.rotulo-local) strong::before{content:'';display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#386145}
.nombre-otro::after{content:'';position:absolute;inset:-8px -4px -40px}
.nombre-otro.punto{width:14px;height:14px;padding:0;gap:0;font-size:0;border:2px solid var(--papel);background:#386145}
.nombre-otro.punto>*{display:none}
.rotulo-local{pointer-events:none}.rotulo-local strong::before{background:var(--azul)}
.nombre-otro[hidden],.en-entrada #otros{display:none}
#ficha-persona-oficio{margin:6px 0 0;font-size:14px;color:var(--suave)}
#ficha-persona-datos{display:grid;gap:8px;margin:16px 0}
#ficha-persona-datos dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--suave);padding:10px 14px 0;border-radius:16px 16px 0 0;background:var(--suelo)}
#ficha-persona-datos dd{margin:-8px 0 0;padding:2px 14px 10px;border-radius:0 0 16px 16px;background:var(--suelo);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
#ficha-persona-escribir{width:100%;min-height:48px;border:0;border-radius:999px;background:var(--azul);color:#fff;font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .16),0 4px 10px rgb(0 0 0 / .10);transition:transform .12s var(--rapida)}
#ficha-persona-estado{font-size:13px;margin:10px 4px 0;color:var(--suave)}#ficha-persona-estado:empty{margin:0}

.dialogo-social{position:fixed;inset:0;margin:auto;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:24px;border:0;border-radius:24px;background:var(--papel);color:var(--tinta);overflow:auto;overscroll-behavior:contain;box-shadow:0 1px 2px rgb(0 0 0 / .06),0 18px 48px rgb(0 0 0 / .14)}
.dialogo-social[open]{animation:panel .26s var(--rapida)}
.dialogo-social:not([open]){display:none}
.dialogo-social::backdrop{background:rgb(35 42 50 / .28)}
#chat-dialogo[open]{display:flex;flex-direction:column}
.chat-cabecera{display:flex;align-items:center;justify-content:space-between;gap:16px}
.chat-cabecera h2{font:28px/1.15 Hue,Georgia,serif;margin:0;overflow-wrap:anywhere}
.chat-cabecera button{flex:none;border:0;border-radius:999px;background:var(--suelo);transition:transform .12s var(--rapida),background-color .16s ease}
#chat-contexto{font-size:14px;line-height:1.45;margin:10px 0 0;overflow-wrap:anywhere;color:var(--suave)}
#chat-presencia{font-size:13px;margin:8px 0 0;color:var(--suave)}
#chat-caduca{align-self:flex-start;margin:12px 0 4px;padding:6px 12px;border-radius:999px;background:var(--suelo);font-size:12px;color:var(--tinta)}

#bandeja{display:grid;gap:8px;padding:0;list-style:none;margin:16px 0 0}
#bandeja li{margin:0}
#bandeja li.vacio{padding:16px;border-radius:16px;background:var(--suelo);font-size:14px;line-height:1.5;color:var(--suave)}
#bandeja button{display:grid;gap:4px;width:100%;min-height:56px;padding:12px 18px;border:0;border-radius:16px;background:var(--suelo);text-align:left;font-weight:600;overflow-wrap:anywhere;transition:transform .12s var(--rapida),background-color .16s ease}
#bandeja small{font-size:12px;font-weight:400;color:var(--suave)}

#mensajes{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:120px;height:min(38dvh,340px);overflow:auto;margin:8px 0 12px;padding:8px 2px;list-style:none;scrollbar-width:thin;scrollbar-color:var(--borde) var(--papel)}
#mensajes:empty::before{content:'Escribe para empezar la conversación.';font-size:14px;color:var(--suave);margin:auto;max-width:30ch;text-align:center}
#mensajes li{max-width:84%;padding:10px 14px;border-radius:18px 18px 18px 6px;background:var(--suelo);font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
#mensajes li.nuevo{animation:entrar .22s var(--rapida) both}
#mensajes li.mio{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--azul);color:#fff}
#mensajes time{display:block;margin-top:4px;font-size:11px;opacity:.72}
#mensajes-anteriores{align-self:center;border:0;border-radius:999px;background:var(--suelo);font-size:13px}

#mensaje-form{display:flex;align-items:flex-end;gap:8px;padding:6px;border-radius:28px;background:var(--suelo)}
#mensaje{flex:1;min-width:0;min-height:44px;max-height:132px;field-sizing:content;resize:none;padding:11px 14px;border:0;border-radius:22px;background:transparent;color:var(--tinta);font:inherit;font-size:16px;line-height:1.4}
#mensaje:focus-visible{outline:3px solid var(--foco);outline-offset:0}
#enviar{flex:none;min-height:44px;padding:8px 20px;border:0;border-radius:999px;background:var(--azul);color:#fff;font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .16),0 4px 10px rgb(0 0 0 / .10);transition:transform .12s var(--rapida),box-shadow .16s ease}
#enviar:disabled{opacity:.5;box-shadow:none}
#chat-estado,#bandeja-estado{font-size:13px;line-height:1.5;margin:10px 4px 0;overflow-wrap:anywhere;color:var(--suave)}
#chat-estado:empty,#bandeja-estado:empty{margin:0}
.dialogo-social :focus-visible{outline:3px solid var(--foco);outline-offset:3px}
.dialogo-social ::selection{background:var(--azul);color:#fff}
@media(hover:hover){#bandeja button:hover,.chat-cabecera button:hover,#mensajes-anteriores:hover{background:#ece7dc}}

@media(max-width:760px){
  header{grid-template-columns:52px minmax(0,1fr) auto auto}
  #conversaciones{grid-column:4;grid-row:1;padding:8px 10px;font-size:12px;min-height:44px}
  #menu-salon{grid-column:3 / 5}
  body.con-comunidad #gestos{display:none}
  .dialogo-social{inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88dvh;padding:18px 16px max(16px,env(safe-area-inset-bottom));border-radius:24px 24px 0 0}
  .dialogo-social[open]{animation-name:hoja}
  .chat-cabecera h2{font-size:24px}#mensajes{height:40dvh}
}
@media(max-height:500px){#mensajes{min-height:70px;height:24dvh}.dialogo-social{padding:14px}}
@media(prefers-reduced-motion:reduce){.dialogo-social[open],#mensajes li{animation:none}.persona button,.dialogo-social button,#enviar{transition:none}.persona button:active,.dialogo-social button:active{transform:none}}