/* ---------------------------------------------------------------------------
   Modo incrustado de las paginas sociales (Chat, Mis vecinos, Buscar)
   ---------------------------------------------------------------------------
   ruffle.html abre estas paginas dentro del menu lateral del juego, en un
   iframe. Un script en el <head> de cada pagina marca <html class="embedded">
   cuando no es la ventana principal, y estas reglas quitan lo que sobra ahi
   dentro: cabecera, barra inferior con "Volver al juego", caja centrada y
   margenes. Fuera del iframe nada de esto aplica y las paginas se ven igual
   que siempre.
*/

html.embedded,
html.embedded body {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-x: hidden;
}

html.embedded body.canvas,
html.embedded body.liquid,
html.embedded body.ego_wide {
    background: #161412 !important;
    background-image: none !important;
}

/* La caja ocupa todo el panel, sin bordes ni sombras de tarjeta. */
html.embedded .uiInterstitial,
html.embedded .socialBox,
html.embedded .chatBox {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* El titulo ya lo pone el panel; la barra de abajo llevaba fuera del juego. */
html.embedded .uiHeader.interstitialHeader,
html.embedded .uiInterstitialBar,
html.embedded #canvas_throbber {
    display: none !important;
}

html.embedded .uiInterstitialContent {
    padding: 12px 12px 18px !important;
}

/* Filas de jugadores: en 340-420px los botones van debajo del nombre. */
html.embedded .pRow {
    flex-wrap: wrap;
}

html.embedded .pActions {
    width: 100%;
    justify-content: flex-end;
}

html.embedded .pSearch {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: -12px -12px 6px;
    padding: 12px;
    background: #161412;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
}

/* El enlace de invitacion vive en la seccion "Invitar amigos". */
html.embedded .socialBox.friendsPage #invitar {
    display: none;
}

/* --- Chat ---------------------------------------------------------------
   Arriba las salas (Global + cada amigo) como fichas deslizables; debajo la
   conversacion, que llena el alto del panel. */
/* El chat llena el panel: la pagina en si no se desplaza, solo la
   conversacion. */
html.embedded:has(.chatBox),
html.embedded:has(.chatBox) body {
    overflow: hidden;
}

html.embedded .chatWrap {
    flex-direction: column;
    gap: 10px;
    /* Alto del panel menos el relleno de la caja y la linea de error. */
    height: calc(100vh - 58px);
}

/* Dos bloques: "Salas" (la global) y "Mis amigos" (los privados), cada
   uno en su linea, con las fichas envolviendo hacia abajo. */
html.embedded .chatSide {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px 10px;
    max-height: 34vh;
    overflow-y: auto;
    scrollbar-width: thin;
}

html.embedded .chatSide .pSection {
    flex: 0 0 100%;
    margin: 4px 0 0 !important;
    font-size: 10px;
}

html.embedded .chatSide .pSection:first-child {
    margin-top: 0 !important;
}

html.embedded .chatFriend {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 10px;
    white-space: nowrap;
}

html.embedded .chatFriend img {
    width: 22px;
    height: 22px;
}

html.embedded .chatFriend .chatHint {
    display: none;
}

html.embedded .chatSideEmpty {
    flex: 0 0 100%;
    margin: 0;
    white-space: normal;
}

/* mobile.css estira los botones a todo el ancho en pantallas estrechas,
   que es justo lo que mide el panel: aqui el campo se queda con el sitio. */
html.embedded .chatComposer input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

html.embedded .chatComposer .uiButton {
    flex: 0 0 auto;
    width: auto !important;
}

html.embedded .chatMain {
    flex: 1 1 auto;
    min-height: 0;
}

html.embedded .chatLog {
    min-height: 0;
    max-height: none;
}

html.embedded .chatBody {
    max-width: 86%;
}

html.embedded .pSearch {
    display: flex;
    gap: 8px;
    align-items: center;
}

html.embedded .pSearch input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

html.embedded .pSearch .uiButton {
    flex: 0 0 auto;
    width: auto !important;
}

/* Dentro del panel el fondo va liso (el camuflaje partido de social.css es
   para las páginas sueltas): se lee mejor en 360-400 px. */
html.embedded {
    background: #161412 !important;
}

html.embedded body::before,
html.embedded body::after {
    display: none !important;
}