/* ═══════════════════════════════════════════════════════
   MOBILE LOCK — fuerza el layout móvil en dispositivos
   táctiles/móviles reales, sin importar el ancho actual
   del viewport (evita que al rotar a horizontal se vea
   como la versión de escritorio).
   La clase html.lock-mobile-layout la añade js/deviceLock.js
   una sola vez al cargar, en base al user-agent / puntero,
   NO en base al ancho de pantalla — así rotar el dispositivo
   nunca cambia el layout.
   ═══════════════════════════════════════════════════════ */

html.lock-mobile-layout body {
    overflow: hidden;
  }
html.lock-mobile-layout .app-wrapper {
    height: 100dvh;
    position: relative;
    overflow: hidden;
  }
html.lock-mobile-layout .sidebar {
    display: flex !important;
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 72px;
    min-width: 72px;
    background: var(--bg-channel, #191B20);
    z-index: 20;
  }
html.lock-mobile-layout .channel-panel {
    position: absolute;
    top: 0; bottom: 0;
    left: 72px;
    right: 0;
    width: calc(100% - 72px);
    min-width: unset;
    z-index: 20;
    background: var(--bg-channel, #191B20);
  }
html.lock-mobile-layout .sidebar.hidden-mobile,
html.lock-mobile-layout .channel-panel.hidden-mobile {
    display: none !important;
  }
/* La barra de usuario rectangular de escritorio (nombre + tag +
   engranaje de ajustes) es propia del layout de PC. En móvil su
   equivalente es la pestaña "Tú" de la barra de navegación inferior,
   así que aquí se oculta siempre — si no, se cuela por detrás/encima
   de otras pantallas (p. ej. al abrir Ajustes del servidor) mezclando
   el estilo de escritorio con el de móvil. */
html.lock-mobile-layout #userBar {
    display: none !important;
  }
html.lock-mobile-layout .chat-area {
    position: absolute;
    inset: 0;
    width: 100%;
    display: none;
  }
html.lock-mobile-layout .chat-area.active-mobile {
    display: flex;
  }
html.lock-mobile-layout .messages-area {
  scrollbar-width: none;
}
html.lock-mobile-layout .messages-area::-webkit-scrollbar { width: 0; height: 0; display: none; }
html.lock-mobile-layout .mobile-back-btn {
    display: block !important;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
  }
html.lock-mobile-layout .chat-header-icons { display: none; }
html.lock-mobile-layout .chat-header {
    padding: 0 10px;
    gap: 6px;
  }
html.lock-mobile-layout .message-form-wrap {
    padding: 10px 8px 12px;
    border-top: 1px solid #26292F;
    background: var(--bg-channel, #1D2026);
  }
html.lock-mobile-layout .mf-pill {
    background: var(--bg-input, #292D35);
    border-radius: 20px;
  }
html.lock-mobile-layout .mf-circle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
html.lock-mobile-layout .mf-icon-switcher {
    width: 36px;
    height: 36px;
  }
html.lock-mobile-layout .mf-layer {
    width: 36px;
    height: 36px;
  }
html.lock-mobile-layout .attach-icon-mobile,
html.lock-mobile-layout .mf-circle-btn svg {
    width: 18px;
    height: 18px;
  }
html.lock-mobile-layout .mf-pill-icon {
    width: 22px;
    height: 22px;
  }
html.lock-mobile-layout .mf-icon-switcher {
    display: block;
  }
html.lock-mobile-layout .messages-area {
    padding-left: 0;
    padding-right: 0;
  }
html.lock-mobile-layout .message-card {
    padding: 6px 16px 2px 18px;
  }
html.lock-mobile-layout .msg-row {
    gap: 14px;
  }
html.lock-mobile-layout .message-card.msg-grouped {
    margin-top: 2px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
html.lock-mobile-layout .message-card.msg-grouped .msg-body,
html.lock-mobile-layout .message-card.msg-grouped .msg-text,
html.lock-mobile-layout .message-card.msg-grouped .msg-body > * {
  margin: 0 !important;
  padding: 0 !important;
}
/* Un poquito más de aire entre el nombre y el primer texto del bloque —
   compensado quitando lo mismo del margen ANTES del bloque, para que el
   borde inferior (y por tanto el hueco con el siguiente mensaje) no se
   mueva ni un píxel. */
html.lock-mobile-layout .message-card.new-sender {
    margin-top: 14px;
  }
html.lock-mobile-layout .message-card.new-sender .msg-meta {
  margin-bottom: 5px;
}
html.lock-mobile-layout .msg-avatar {
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
    font-size: 0.92rem;
  }
html.lock-mobile-layout .msg-avatar img {
    max-width: 40px; max-height: 40px;
  }
html.lock-mobile-layout .msg-avatar-placeholder {
    width: 40px;
    min-width: 40px;
  }
html.lock-mobile-layout .msg-sender {
    font-size: 0.97rem;
  }
html.lock-mobile-layout .msg-time {
    font-size: 0.7rem;
  }
html.lock-mobile-layout .msg-text {
    font-size: 0.95rem;
    line-height: 1.42;
  }
html.lock-mobile-layout .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: var(--bottom-nav-h);
    background: var(--bg-channel, #191B20);
    border-top: 1px solid #26292F;
    z-index: 970;
    align-items: stretch;
  }
html.lock-mobile-layout body.in-chat .bottom-nav {
    display: none !important;
  }
html.lock-mobile-layout body.in-chat {
    padding-bottom: 0 !important;
  }
html.lock-mobile-layout body:not(.in-chat) {
    padding-bottom: var(--bottom-nav-h);
  }
html.lock-mobile-layout .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    padding: 6px 4px;
    transition: color var(--transition);
  }
html.lock-mobile-layout .bnav-btn.active { color: #fff; }
html.lock-mobile-layout .bnav-btn:hover { color: var(--text); }
html.lock-mobile-layout .bnav-icon {
    width: 24px; height: 24px;
    fill: currentColor;
    display: block;
  }
html.lock-mobile-layout .bnav-btn svg path { fill: currentColor; }
html.lock-mobile-layout .bnav-icon-mask {
    background-color: currentColor;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
  }
html.lock-mobile-layout .bnav-avatar {
    width: 28px; height: 28px;
    min-width: 28px; min-height: 28px;
    border-radius: 50%;
    background: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; color: #fff;
    overflow: visible; 
    position: relative;
    flex-shrink: 0;
  }
html.lock-mobile-layout .bnav-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
  }
html.lock-mobile-layout .bnav-avatar span {
    position: relative;
    z-index: 1;
  }
html.lock-mobile-layout .bnav-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 1;
  }
html.lock-mobile-layout .modal-box {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
html.lock-mobile-layout .modal-overlay.open {
    align-items: flex-end;
  }
html.lock-mobile-layout .pv-sheet {
    max-width: 100%;
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
  }
html.lock-mobile-layout .pv-banner {
    height: 230px !important;
  }
html.lock-mobile-layout .pv-avatar-wrap {
    margin-top: -88px !important;
  }

html.lock-mobile-layout #emojiPicker {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    height: 85vh;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
    z-index: 3100;
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.34,1.06,0.64,1);
    display: flex !important;
    pointer-events: none;
    opacity: 0;
  }
html.lock-mobile-layout #emojiPicker.open {
    transform: translateY(0);
    pointer-events: auto;
    opacity: 1;
  }
html.lock-mobile-layout .ep-drag-pill {
    width: 36px; height: 4px;
    background: #414449;
    border-radius: 4px;
    margin: 8px auto 4px;
  }

html.lock-mobile-layout .ep-drag-area { display: block; }

html.lock-mobile-layout #homeFab { display:flex !important; }

html.lock-mobile-layout #homeMobileBack { display:flex !important; }

html.lock-mobile-layout #homePanel.home-open {
    
    left: 72px !important;
    flex-direction: column !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 15; 
  }
html.lock-mobile-layout #homePanel.home-open #homeSidebar {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
    border-right: none !important;
  }
html.lock-mobile-layout #homePanel.home-open #homeMain {
    display: none !important;
  }
html.lock-mobile-layout #homePanel.home-open.home-main-active #homeSidebar {
    display: none !important;
  }
html.lock-mobile-layout #homePanel.home-open.home-main-active #homeMain {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    height: 100%;
  }

html.lock-mobile-layout #ypEditOverlayRoot {
    background: transparent !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    /* Fade in/out en vez del display:none/flex instantáneo: se mantiene
       siempre en el flujo (oculto con opacity+pointer-events) para que
       la transición se vea tanto al entrar como al salir. */
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
html.lock-mobile-layout #ypEditOverlayRoot.open {
    opacity: 1;
    pointer-events: auto;
  }
html.lock-mobile-layout #ypEditBoxRoot {
    border-radius: 0 !important;
    max-height: none !important;
    height: 100dvh !important;
    height: 100vh !important; 
    max-width: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  }
html.lock-mobile-layout #ypEditBoxRoot > div:first-child {
    position: sticky !important;
    top: 0 !important;
    flex-shrink: 0 !important;
    z-index: 10 !important;
  }
html.lock-mobile-layout #ypEditBoxRoot > div:not(:first-child):not(:last-child),
html.lock-mobile-layout #ypEditScrollArea {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }


/* ═══════════════════════════════════════════════════════
   Restaurar la caja de mensajes MÓVIL (píldora + mic) y el
   picker de GIFs/Emojis MÓVIL cuando, en horizontal, el
   ancho cruza los breakpoints de escritorio/tablet
   (min-width:769px / min-width:769 y max-width:1024).
   ═══════════════════════════════════════════════════════ */

/* messageForm.css — deshacer el bloque "Desktop: barra plana" */
html.lock-mobile-layout .message-form-wrap {
  padding: 8px 10px 14px !important;
  height: auto !important;
  display: block !important;
}
html.lock-mobile-layout .mf-row {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}
html.lock-mobile-layout .mf-pill {
  flex: 1 !important;
  min-width: 0 !important;
  background: var(--bg-input, #292D35) !important;
  border-radius: 20px !important;
  padding: 0 10px 0 14px !important;
  min-height: 42px !important;
}
html.lock-mobile-layout .mf-pill-icons {
  margin-left: 0 !important;
}
html.lock-mobile-layout .attach-icon-mobile  { display: block !important; }
html.lock-mobile-layout .attach-icon-desktop { display: none !important; }
html.lock-mobile-layout .mf-icon-switcher { display: flex !important; }

/* mobile.css — deshacer el bloque "Tablet" que oculta iconos del header (4to en adelante) */
html.lock-mobile-layout .chat-header-icons .hdr-icon:nth-child(n+4) { display: flex !important; }

/* desktopPicker.css — el picker de escritorio (#dpPicker/#dpOverlay) nunca debe
   mostrarse en dispositivos móviles reales; siempre se usa #emojiPicker (móvil) */
html.lock-mobile-layout #dpOverlay,
html.lock-mobile-layout #dpPicker,
html.lock-mobile-layout #dpOverlay.open,
html.lock-mobile-layout #dpPicker.open {
  display: none !important;
}