/* =========================================================================
   responsive.css — capa responsive central de Makiporn
   -------------------------------------------------------------------------
   Se carga DESPUÉS del resto de CSS de cada página.

   Contrato:
   - Escritorio (≥ 980 px) intacto: TODAS las reglas visuales están dentro
     de media queries max-width. Fuera de ellas solo hay variables.
   - Sin !important. Cuando hace falta ganar a una regla existente se usa la
     misma especificidad (este archivo carga después) y se indica.
   - CSS antes que JS para el layout.

   Breakpoints (no pueden ser variables CSS dentro de @media):
     ≤ 979.98 px  tablet / móvil   (coincide con el límite de --ui-zoom en style.css)
     ≤ 767.98 px  móvil
     ≤ 479.98 px  móvil pequeño
   Condición adicional "móvil en horizontal" (solo donde el alto es el límite,
   p. ej. mensajes privados): (max-width: 979.98px) and (max-height: 479.98px)

   Cargado en index, create_room, legales, age, master_login y room (M2).
   ========================================================================= */

:root{
  --app-h: 100vh;        /* alto visible del viewport (fallback) */
  --gutter: 16px;        /* margen lateral en móvil */
  --tap: 44px;           /* objetivo táctil recomendado (acciones principales) */
  --tap-min: 36px;       /* objetivo táctil secundario (idiomas, footer, emojis) */
  --input-fs: 16px;      /* < 16px provoca zoom automático en iOS al enfocar */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
}

@supports (height: 100dvh){
  :root{ --app-h: 100dvh; }
}

/* ---- Room: elementos que solo existen para el shell móvil (todas las anchuras) ----
   En escritorio quedan ocultos / transparentes al layout: el escritorio no cambia.
   --room-shell lo leen room_chat_ui.js y room.js (el breakpoint vive solo aquí). */
:root{ --room-shell: desktop; }
.roomchat-tab--gallery,
.roomchat-tab__unseen,
.room-actions-toggle{
  display: none;
}
.room-actions-more{
  display: contents;   /* sus botones siguen siendo hijos flex de .room-actions */
}


/* =========================================================================
   ≤ 979.98 px — tablet / móvil
   ========================================================================= */
@media (max-width: 979.98px){

  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Sticky footer con el alto realmente visible (barras del navegador móvil) */
  body{
    min-height: calc(var(--app-h) / var(--ui-zoom));
  }

  /* ---- Formularios: 16px mínimo + tipografía heredada ----------------------
     Especificidad alta a propósito: debe ganar a reglas existentes como
     `.modal-content.modal-small .input-field` (0,3,0) sin usar !important. */
  body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), select, textarea){
    font-size: var(--input-fs);
    font-family: inherit;
    /* La UI es oscura: los controles nativos (select, date, checkbox) se pintan
       en su variante oscura. Sin esto WebKit dibuja el <select> claro con el
       texto claro de .input-field (#eaeaea) → prácticamente ilegible. */
    color-scheme: dark;
  }
  body input[type="checkbox"]{
    color-scheme: dark;
  }

  /* ---- Objetivos táctiles secundarios en tablet y móvil (M8; antes solo
          <= 767 px): idiomas, enlaces del pie y pestañas de ROOM en tablet. */
  .lang-switch a{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
  .site-footer__links{
    gap: 0 var(--space-2);
  }
  .site-footer__links a{
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
  }
  .roomchat-tab,
  #roomchat-pin.roomchat-pin{
    min-height: var(--tap-min);
  }

  /* ---- Campos de texto de formularios (M7): alto táctil. Con 16px de fuente
          y el padding de .input-field, WebKit los dejaba en 34px. */
  .input-field{
    min-height: var(--tap);
  }
  /* ---- master_login (M7): usa .input/.btn de master_panel.css, que esta
          página no carga; en táctil los controles nativos medían 21-27px. */
  form.panel > .input{
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: var(--tap);
  }
  form.panel > .btn{
    min-height: var(--tap);
  }

  /* ---- Panel de mensajes privados: solo alto visible (sin rediseño, M1/M5) */
  .dm-panel{
    height: calc(var(--app-h) - var(--topbar-h) - 24px);
  }
  .dm-threads,
  .dm-messages{
    overscroll-behavior: contain;
  }
  /* Tablet táctil (M5): emojis con objetivo táctil secundario. dm_emojis.css se
     inyecta después de esta hoja: .dm-panel sube la especificidad */
  .dm-panel .dm-emoji{
    min-width: var(--tap-min);
    height: var(--tap-min);
  }

  /* ---- Patrón base de modal ------------------------------------------------
     - el overlay hace scroll si el contenido es más alto que la pantalla;
     - margin:auto centra cuando cabe y alinea arriba cuando no
       (con align-items:center la parte superior quedaría inaccesible);
     - el contenido nunca supera el ancho disponible. */
  .modal{
    box-sizing: border-box;
    padding: var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: flex-start;
  }
  .modal > .modal-content{
    margin: auto;
    max-width: 100%;
  }

  /* Modal pequeño (p. ej. acceso a sala privada en index) */
  .modal-content.modal-small{
    width: 100%;
    max-height: none;
  }

  /* ---- M6: resto de diálogos con el mismo patrón ---------------------------
     Cajas que no son .modal-content (subida, reporte, alias): centradas cuando
     caben, alineadas arriba y con scroll del overlay cuando no. */
  .modal > .upload-box,
  .modal > .report-box,
  .modal > .alias-box{
    margin: auto;
    max-width: 100%;
    box-sizing: border-box;
  }
  .upload-box{
    width: min(400px, 100%);
  }
  .report-modal{
    padding: var(--gutter);
  }
  .report-box{
    width: min(560px, 100%);
  }
  /* Token generado: su propio overlay (no es .modal) con el mismo patrón */
  .token-modal{
    box-sizing: border-box;
    padding: var(--gutter);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-items: flex-start;
  }
  .token-box{
    margin: auto;
    width: 100%;
    box-sizing: border-box;
  }
  /* Cierres ✖: objetivo táctil de 44px, dentro de la pantalla */
  .modal-x,
  .modal-content.modal-tutorial .modal-close-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
  }
  .upload-close,
  .report-modal .report-close{
    top: var(--space-1);
    right: var(--space-1);
  }
  .modal-content.modal-small .modal-close{
    top: var(--space-1);
    right: var(--space-1);
  }
  .modal-content.modal-tutorial .modal-close-btn{
    top: var(--space-1);
    right: var(--space-1);
  }
  /* Acciones principales de los diálogos: 44px */
  #upload-form button[type="submit"],
  .report-actions .header-btn,
  .modal-content.modal-tutorial .tutorial-actions .header-btn,
  .token-box .header-btn,
  .token-box .token-close-btn,
  .modal-content.modal-small .button,
  .alias-box .button{
    min-height: var(--tap);
  }
  /* ---- Room en tablet (768–979): dos columnas, barra lateral fluida ---- */
  body.room-page{
    height: calc(var(--app-h) / var(--ui-zoom));
  }
  body.room-page .room-container > .sidebar{
    width: clamp(260px, 34vw, 320px);
    flex: 0 0 auto;
  }
  .room-toolbar{
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }

  /* ---- Galería (M3): rejilla fluida en lugar de miniaturas fijas de 150px.
     2 columnas en móvil vertical (mín. 150px o media anchura), más columnas
     a medida que crece el ancho. Sin JS. */
  body.room-page .gallery-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - var(--space-2) / 2)), 1fr));
    gap: var(--space-3) var(--space-2);
    align-content: start;
  }
  body.room-page .gallery-container .thumb{
    min-width: 0;
  }
  body.room-page .gallery-container .thumb img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;   /* object-fit: cover (style.css) sin deformar */
  }
  body.room-page .gallery-container .thumb img:hover{
    transform: none;       /* sin "hover pegado" en táctil */
  }
  body.room-page .gallery-container .thumb-author{
    max-width: 100%;
  }
  /* Votos: zona táctil ~44px; el emoji sigue igual */
  body.room-page .gallery-container .votes{
    gap: 0;
    margin: 0;
    align-items: center;
  }
  body.room-page .gallery-container .vote-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
  }
  body.room-page .gallery-container .vote-count{
    min-width: 2ch;
    text-align: center;
  }

  /* misma especificidad que style.css → gana por orden */
  .modal-content.modal-small .modal-close{
    top: 0;
    right: 0;
    width: var(--tap);
    height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* =========================================================================
   ≤ 767.98 px — móvil
   ========================================================================= */
@media (max-width: 767.98px){

  .container{
    padding: 0 var(--gutter);
  }

  /* ---- Header global ---- */
  .dm-toggle{
    width: var(--tap);
    height: var(--tap);
  }
  .lang-switch{
    gap: var(--space-1);
    padding: 0 var(--space-1);
  }

  /* ---- Páginas centradas (create_room): sin doble margen lateral y sin
          recortar arriba si el formulario no cabe en alto ---- */
  .centered-page{
    padding: var(--space-4) 0;
    align-items: flex-start;
  }
  .centered-page .container{
    margin: auto;
  }

  /* ---- Index: listado de salas ----
     Tarjeta en fila: miniatura a la izquierda; a la derecha el nombre
     (hasta 2 líneas) y debajo los badges, que pueden partir línea
     (en style.css .room-badges es flex:0 0 auto y desborda la tarjeta). */
  .room-item{
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
  }
  .room-item .room-thumb,
  .room-item .empty-thumb{
    margin-right: 0;   /* el hueco lo da el gap de la tarjeta */
  }
  .room-info{
    flex-wrap: wrap;
    row-gap: var(--space-2);
  }
  .room-info .room-name{
    flex: 1 1 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .room-badges--index{
    flex: 1 1 100%;
    justify-content: flex-start;
  }

  /* ---- create_room ---- */
  .room-form .button{
    width: 100%;
  }
  /* Etiquetas con checkbox: toda la fila es la zona táctil */
  .room-form label:has(> input[type="checkbox"]){
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    margin: 0;
  }
  .room-form input[type="checkbox"]{
    width: 20px;
    height: 20px;
    margin: 0;
    flex: 0 0 auto;
  }



  /* ---- Acciones principales con objetivo táctil ---- */
  .index-actions .header-btn,
  .index-actions .button,
  .room-form .button,
  .back-link{
    min-height: var(--tap);
  }

  /* ---- Tutorial de sala privada: apilar acciones
          (antes en style.css en un bloque sin @media que el navegador descartaba) */
  .modal-content.modal-tutorial .tutorial-actions{
    flex-direction: column;
  }
  .modal-content.modal-tutorial .tutorial-actions .header-btn{
    width: 100%;
  }
}


/* =========================================================================
   Mensajes privados en móvil: ≤ 767.98 px  o  móvil en horizontal
   (ancho ≤ 979.98 px y alto ≤ 479.98 px). En horizontal el panel flotante
   dejaba ~37 px para los mensajes. Misma condición que el bloque de vista
   lista ↔ conversación de style.css.
   ========================================================================= */
@media (max-width: 767.98px), (max-width: 979.98px) and (max-height: 479.98px){

  /* ---- Hoja a pantalla completa ----------------------------------------
     Vista lista ↔ conversación ya existe (style.css, data-view en #dm-panel).
     Aquí: ocupar toda la pantalla visible, cabecera/composer fijos dentro del
     panel y scroll solo en la lista / mensajes. */
  .dm-panel{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: var(--app-h);
    border: 0;
    border-radius: 0;
  }
  html.dm-open,
  html.dm-open body{
    overflow: hidden;   /* sin scroll del fondo mientras el panel está abierto */
  }
  .dm-head{
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  }
  .dm-close,
  .dm-back{
    width: var(--tap);
    height: var(--tap);
    flex: 0 0 auto;
  }
  .dm-chat-head{
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-2);
  }
  .dm-peer{
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Hilo: rejilla [alias … no leídos] / [vista previa] en style.css (M5);
     aquí solo un objetivo táctil más alto. */
  .dm-thread{
    padding: var(--space-3) var(--space-4);
  }
  .dm-thread__title{
    font-weight: 800;
  }
  /* dm_emojis.css se inyecta después de esta hoja: .dm-panel sube la especificidad */
  .dm-panel .dm-emojis{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: var(--space-2) var(--space-3) 0;
  }
  .dm-panel .dm-emoji{
    flex: 0 0 auto;
    width: 40px;
    height: var(--tap-min);
  }
  .dm-compose{
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }
  .dm-input{
    /* M5: una línea = alto del botón Enviar (como el chat de sala); dm.js solo
       mide con texto y respeta box-sizing. Máx. 120px y scroll interno. */
    box-sizing: border-box;
    height: auto;
    min-height: var(--tap);
    max-height: 120px;
    padding: var(--space-2) var(--space-3);
  }
  .dm-send{
    width: auto;
    min-width: 76px;
    height: var(--tap);
    padding: 0 var(--space-4);
  }
}

/* =========================================================================
   ≤ 479.98 px — móvil pequeño
   ========================================================================= */
@media (max-width: 479.98px){

  /* Header en dos filas: [logo · mensajes] / [idiomas a todo el ancho].
     .topbar-right deja de ser contenedor para que sus hijos se repartan
     en la cuadrícula del header. */
  .topbar{
    flex-wrap: wrap;
    row-gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-2) 0;
  }
  .brand-logo{
    height: 44px;
  }
  .topbar-right{
    display: contents;
  }
  .lang-switch{
    order: 3;
    flex: 1 1 100%;
    justify-content: space-between;
    margin-left: var(--space-2);
  }
  .lang-switch a{
    flex: 1 1 0;
  }
}


/* =========================================================================
   ROOM — shell móvil: ≤ 767.98 px  o  móvil en horizontal
   (misma condición que los mensajes privados). Una sola vista activa:
   body[data-room-view] = gallery | chat | users (room_chat_ui.js).
   .sidebar y #roomchat pasan a display:contents: la barra de pestañas y los
   paneles existentes se colocan en la misma columna que la galería, sin
   duplicar markup ni lógica.
   ========================================================================= */
@media (max-width: 767.98px), (max-width: 979.98px) and (max-height: 479.98px){

  :root{
    --room-shell: mobile;
    --room-fab-h: 56px;
    --viewer-bar-h: 52px;
    /* marco de imagen: ~62 % del alto útil, nunca menos de 200px */
    --viewer-stage-h: max(200px, calc((var(--app-h) - var(--viewer-bar-h)) * 0.62));
  }

  /* ---- Shell: alto visible; el documento no hace scroll (room_chat.css) ---- */
  body.room-page{
    height: var(--app-h);
  }
  /* Footer: fuera del shell móvil (los enlaces legales siguen en index/edad
     y en el modal de subida). Ocuparía alto fijo de forma permanente. */
  body.room-page .site-footer{
    display: none;
  }
  body.room-page .container.room-page-content{
    padding: 0;
  }

  /* ---- Toolbar: [volver] [nombre…] [⋯] / [badges] ---- */
  .room-toolbar{
    position: relative;   /* ancla del menú ⋯ */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "back title menu"
      "badges badges badges";
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter);
  }
  .room-toolbar .room-title-wrap,
  .room-toolbar .room-actions{
    display: contents;
  }
  .room-title{
    grid-area: title;
    font-size: 18px;
  }
  .room-badges{
    grid-area: badges;
    flex-wrap: wrap;
  }
  .room-back-btn{
    grid-area: back;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 var(--space-3);
  }
  .room-back-btn__label{
    display: none;   /* el enlace conserva su aria-label */
  }
  .room-actions-toggle{
    grid-area: menu;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: #333;
    color: #fff;
    font: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .room-actions-toggle[aria-expanded="true"]{
    background: #444;
  }
  .room-actions-more{
    display: none;
  }
  .room-actions-more.is-open{
    position: absolute;
    top: calc(100% - var(--space-1));
    right: var(--gutter);
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: min(260px, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-2);
    background: #161616;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  }
  .room-actions-more form{
    display: block;
  }
  .room-actions-more .header-btn{
    width: 100%;
    min-height: var(--tap);
    justify-content: flex-start;
  }

  /* ---- Contenido: pestañas arriba + una sola vista ---- */
  body.room-page .room-container{
    flex-direction: column;
    gap: 0;
  }
  body.room-page .room-container > .sidebar,
  body.room-page .room-container > .sidebar > .roomchat{
    display: contents;
  }
  .roomchat-tabs{
    order: -1;
    flex: 0 0 auto;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-top: 1px solid var(--rc-border);
  }
  .roomchat-tab{
    flex: 1 1 0;
    justify-content: center;
    min-height: var(--tap);
    padding: var(--space-1) var(--space-2);
    white-space: normal;
    text-align: center;
    line-height: 1.15;
  }
  .roomchat-tab--gallery{
    display: inline-flex;
  }
  /* En móvil la pestaña resaltada es la VISTA (body[data-room-view]), no el
     panel .is-active de escritorio. Sin JS de arranque: evita carreras con la
     carga del CSS. */
  .roomchat-tab.is-active{
    background: transparent;
  }
  body.room-page[data-room-view="gallery"] .roomchat-tab[data-tab="gallery"],
  body.room-page[data-room-view="chat"] .roomchat-tab[data-tab="chat"],
  body.room-page[data-room-view="users"] .roomchat-tab[data-tab="users"]{
    background: rgba(109,168,255,0.16);
    border-color: rgba(109,168,255,0.55);
  }
  .roomchat-tab__unseen:not([hidden]){
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #6da8ff;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
  }
  #roomchat-pin.roomchat-pin{
    flex: 0 0 auto;
    min-width: var(--tap);
    min-height: var(--tap);
  }
  body.room-page:not([data-room-view="chat"]) #roomchat-pin{
    display: none;   /* fijar al final solo tiene sentido en Chat */
  }

  body.room-page .room-container > .gallery-container{
    flex: 1 1 auto;
    min-height: 0;
    align-content: flex-start;
    padding: var(--space-3) var(--gutter) calc(var(--room-fab-h) + 2 * var(--space-4));
  }
  body.room-page:not([data-room-view="gallery"]) .room-container > .gallery-container{
    display: none;
  }
  body.room-page[data-room-view="gallery"] .roomchat-panel{
    display: none;
  }
  .roomchat-panel.is-active{
    flex: 1 1 auto;
    min-height: 0;
  }

  /* ---- Visor de imagen móvil (M3) ----------------------------------------
     Pantalla completa:  [✕][autor…][Reportar] / MARCO de imagen / comentarios.
     Una sola zona de scroll (el contenido del visor); el ✕ queda siempre fijo.
     MARCADORES (zona protegida): x/y son % del rectángulo de #image-wrapper
     (room.js selectFlagPosition/createMarker). Aquí el marco sigue siendo una
     caja fija con la imagen contenida, igual que en escritorio: no se cambia
     el significado de x/y ni el JS. Autor/Reportar se colocan por encima del
     marco (top negativo) para no tapar la imagen ni alterar el rectángulo. */
  #modal{
    padding: 0;
    overflow: hidden;
    align-items: stretch;
  }
  #modal > .modal-content--image{
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: none;
    height: var(--app-h);
    max-height: none;
    margin: 0;
    padding: var(--viewer-bar-h) 0 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #modal .modal-close-btn{
    top: 0;
    left: 0;
    right: auto;
    width: var(--viewer-bar-h);
    height: var(--viewer-bar-h);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: rgba(0,0,0,0.55);
    border-bottom-right-radius: 12px;
  }
  #modal #image-wrapper{
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    height: var(--viewer-stage-h);
    max-height: none;
    margin: 0;
    background: #000;
  }
  #modal #image-wrapper img{
    max-width: 100%;
    max-height: 100%;
  }
  #modal #image-wrapper .report-float-btn,
  #modal #image-wrapper .author-float-btn{
    top: calc((var(--viewer-bar-h) + var(--tap-min)) / -2);
    min-height: var(--tap-min);
    padding: 0 var(--space-3);
    opacity: 1;
  }
  #modal #image-wrapper .author-float-btn{
    left: calc(var(--viewer-bar-h) + var(--space-1));
    max-width: calc(100% - var(--viewer-bar-h) - 130px);
  }
  #modal #image-wrapper .report-float-btn{
    right: var(--space-2);
  }
  #modal .modal-content--image > .sidebar{
    flex: 0 0 auto;
    width: 100%;
    max-height: none;
  }
  #modal #chat-content,
  #modal .roomchat--modal{
    flex: none;          /* tamaño natural: no encogerse dentro de la columna */
  }
  #modal #chat-content{
    overflow: visible;   /* sin scroll anidado: scrollea el visor completo */
  }
  #modal .roomchat-msg__reply{
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
  #modal .roomchat-send{
    min-height: var(--tap);
  }
  #modal .image-modal-delete .header-btn{
    min-height: var(--tap);
  }

  /* ---- Botón subir: solo en Galería, sin tapar composer ni pestañas ---- */
  .fab-upload{
    left: auto;
    right: calc(var(--gutter) + env(safe-area-inset-right, 0px));
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    height: var(--room-fab-h);
    border-radius: 14px;
  }
  .fab-upload img{
    height: calc(var(--room-fab-h) - 6px);
  }
  body.room-page:not([data-room-view="gallery"]) .fab-upload{
    display: none;
  }
}

/* ---- ROOM: chat de sala y composer (M4), tablet + móvil ----------------------
   Mismo markup que escritorio. Alto del textarea: SOLO aquí y en room_chat.css
   (min-height / max-height); room_chat_ui.js solo mide cuando hay texto. */
@media (max-width: 979.98px){
  .roomchat-list,
  .roomchat-users{
    overscroll-behavior: contain;   /* el scroll del chat no arrastra la página */
  }
  .roomchat-input{
    min-height: var(--tap);         /* = botón Enviar: una línea, sin salto al escribir */
  }
  /* M8: con rows="1" y la columna estrecha de tablet (768 px) el placeholder
     se partía en dos líneas y la segunda quedaba cortada. */
  .roomchat-input::placeholder{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .roomchat-send{
    height: auto;
    min-height: var(--tap);
  }
  /* Emojis: una sola fila; si no caben, scroll horizontal (no roban alto) */
  .roomchat-emojis{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .roomchat-emojis::-webkit-scrollbar{
    display: none;
  }
  .roomchat-emoji{
    flex: 0 0 auto;
    min-width: var(--tap-min);
    height: var(--tap-min);
  }
  .roomchat-msg__reply,
  .roomchat-reply__cancel{
    min-width: var(--tap-min);
    min-height: var(--tap-min);
  }
}
/* Shell móvil: el composer queda pegado abajo; respetar la zona segura */
@media (max-width: 767.98px), (max-width: 979.98px) and (max-height: 479.98px){
  #room-message-form.roomchat-compose{
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
}

/* Chat de sala en móvil horizontal (M4): poco alto => emojis y campo en la
   misma fila (la respuesta activa ocupa su propia fila). El historial gana
   ~45px; mismos controles y tamaños táctiles. */
@media (max-width: 979.98px) and (max-height: 479.98px){
  #room-message-form.roomchat-compose{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  #room-message-form .roomchat-reply{
    flex: 1 0 100%;
  }
  #room-message-form .roomchat-emojis{
    flex: 0 1 auto;
    min-width: 0;
    padding-bottom: calc((var(--tap) - var(--tap-min)) / 2);   /* centrados respecto al campo */
  }
  #room-message-form .roomchat-inputrow{
    flex: 1 1 260px;
    min-width: 0;
  }
}

/* Room en móvil horizontal: toolbar en una sola fila para no gastar alto;
   visor en fila (imagen | comentarios) para no reducir la imagen a ~200px */
@media (max-width: 979.98px) and (max-height: 479.98px){
  #modal > .modal-content--image{
    flex-direction: row;
    overflow-y: hidden;
  }
  #modal #image-wrapper{
    width: 60%;
    height: 100%;
  }
  #modal .modal-content--image > .sidebar{
    width: 40%;
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .room-toolbar{
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "back title badges menu";
    padding-block: var(--space-1);
  }
  .room-badges{
    flex-wrap: nowrap;
  }
}