/* ═══════════════════════════════════════════════════════
   MOBILE — Layout estilo Discord
   Vista 1: sidebar + channel-panel
   Vista 2: chat-area (sin bottom nav)
   ═══════════════════════════════════════════════════════ */

.bottom-nav { display: none; }
.mobile-back-btn { display: none; }

@media (max-width: 768px) {

  body {
    overflow: hidden;
  }

  .app-wrapper {
    height: 100dvh;
    position: relative;
    overflow: hidden;
  }

  /* ── Sidebar — columna izquierda ── */
  .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;
  }

  /* ── Channel panel — a la derecha de sidebar ── */
  .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);
  }

  /* Vista canales: visible */
  .sidebar.hidden-mobile,
  .channel-panel.hidden-mobile {
    display: none !important;
  }

  /* ── Chat area — pantalla completa ── */
  .chat-area {
    position: absolute;
    inset: 0;
    width: 100%;
    display: none;
  }
  .chat-area.active-mobile {
    display: flex;
  }

  /* ── Mobile scrollbar hidden (custom JS overlay used) ── */
  .messages-area::-webkit-scrollbar { width: 0; }

  /* ── Back button ── */
  .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;
  }

  /* ── Ocultar iconos de escritorio ── */
  .chat-header-icons { display: none; }

  /* ── Chat header compacto ── */
  .chat-header {
    padding: 0 10px;
    gap: 6px;
  }

  /* ── Message form ── */
  .message-form-wrap {
    padding: 10px 8px 12px;
    border-top: 1px solid #26292F;
    background: #1D2026;
  }

  /* En móvil la caja de texto conserva su color original (distinto al de escritorio)
     y vuelve a ser una píldora redondeada */
  .mf-pill {
    background: var(--bg-input, #292D35);
    border-radius: 20px;
  }

  /* Botones circulares (adjuntar / mic-enviar) un poco más pequeños en móvil */
  .mf-circle-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
  .mf-icon-switcher {
    width: 36px;
    height: 36px;
  }
  .mf-layer {
    width: 36px;
    height: 36px;
  }
  .attach-icon-mobile,
  .mf-circle-btn svg {
    width: 18px;
    height: 18px;
  }

  /* Iconos dentro de la píldora (emoji/gif) también más pequeños */
  .mf-pill-icon {
    width: 22px;
    height: 22px;
  }

  /* En móvil sí mostramos el switcher mic/enviar */
  .mf-icon-switcher {
    display: block;
  }

  /* ── Chat messages: más zoom, más padding lateral ── */
  .messages-area {
    padding-left: 0;
    padding-right: 0;
  }
  .message-card {
    padding: 8px 16px 8px 18px;
  }
  .msg-row {
    gap: 14px;
  }
  .msg-avatar {
    width: 40px; height: 40px;
    min-width: 40px; min-height: 40px;
    font-size: 0.92rem;
  }
  .msg-avatar img {
    max-width: 40px; max-height: 40px;
  }
  .msg-avatar-placeholder {
    width: 40px;
    min-width: 40px;
  }
  .msg-sender {
    font-size: 0.97rem;
  }
  .msg-time {
    font-size: 0.7rem;
  }
  .msg-text {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* ── Bottom nav: NUNCA visible en chat, solo en canales ── */
  .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;
  }
  /* Cuando estamos en chat, ocultamos el bottom nav */
  body.in-chat .bottom-nav {
    display: none !important;
  }
  /* Y el body no necesita padding */
  body.in-chat {
    padding-bottom: 0 !important;
  }
  /* En vista canales, dar espacio al bottom nav */
  body:not(.in-chat) {
    padding-bottom: var(--bottom-nav-h);
  }

  .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);
  }
  .bnav-btn.active { color: #fff; }
  .bnav-btn:hover  { color: var(--text); }

  .bnav-icon {
    width: 24px; height: 24px;
    fill: currentColor;
    display: block;
  }
  .bnav-btn svg path { fill: currentColor; }

  .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;
  }

  .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; /* FIX: visible para que el badge de estado no quede recortado */
    position: relative;
    flex-shrink: 0;
  }
  /* El clip del avatar (forma circular) se aplica a un pseudo-elemento para no afectar al badge */
  .bnav-avatar::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 0;
  }
  .bnav-avatar span {
    position: relative;
    z-index: 1;
  }
  .bnav-avatar img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    z-index: 1;
  }

  /* ── Modal full-screen ── */
  .modal-box {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modal-overlay.open {
    align-items: flex-end;
  }

  /* ── Profile viewer max en móvil ──
     Antes 62vh dejaba la hoja muy baja (se abría solo hasta un poco por
     debajo de la mitad de la pantalla). Ahora sube casi hasta el header
     del canal, dejando solo un pequeño margen arriba. */
  .pv-sheet {
    max-width: 100%;
    /* !important porque profile.css se carga DESPUÉS de mobile.css en
       index.html y tiene su propia regla .pv-sheet{height/max-height:...}
       sin media query, que si no se fuerza aquí gana el cascade incluso
       en móvil. height fijo (no solo max-height) para que el tope de la
       hoja no se mueva según cuánto contenido tenga el perfil. */
    height: 90vh !important;
    height: 90dvh !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
  }
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --panel-w: 200px;
    --sidebar-w: 60px;
  }
  .chat-header-icons .hdr-icon:nth-child(n+4) { display: none; }
}