/* LEMU · Panel de conversaciones en el celular (9-oct-2026).
   Celular: menú abajo (como app), lista de chats a pantalla completa y,
   al tocar un contacto, el chat a pantalla completa con botón para volver. */

.chat-back { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; }
  .app { height: 100dvh !important; }

  /* Menú lateral → barra inferior deslizable */
  .sidebar {
    position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
    width: 100% !important; height: calc(64px + env(safe-area-inset-bottom));
    flex-direction: row !important; z-index: 60;
    border-right: 0 !important; border-top: 1px solid var(--border);
    box-shadow: 0 -4px 16px rgba(13, 27, 20, .08);
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface);
  }
  .sidebar .lemu-mini-brand, .sidebar .brand, #bot-impersonation, .sidebar-footer { display: none !important; }
  .sidebar-nav {
    display: flex !important; flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; padding: 6px 6px !important; gap: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1;
  }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-nav .nav-section { display: none !important; }
  .sidebar-nav .nav-item {
    position: relative; flex: 0 0 auto; min-width: 64px; max-width: 76px;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 2px; padding: 6px 4px !important; margin: 0 !important; border-radius: 12px;
  }
  .sidebar-nav .nav-item .nav-icon { font-size: 1.25rem; width: auto; }
  .sidebar-nav .nav-item span:not(.nav-icon):not(.badge) {
    display: block !important; font-size: 10.5px; line-height: 1.15; text-align: center;
    max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sidebar-nav .nav-item .badge { position: absolute; top: 2px; right: 6px; margin: 0; font-size: 10px; }

  /* Contenido a todo el ancho, sin quedar bajo la barra */
  .content { width: 100%; height: calc(100dvh - 64px - env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-width: none; }
  .content::-webkit-scrollbar { display: none; }
  .section { padding: 1rem !important; }
  #section-inbox { padding: 0 !important; height: 100% !important; }

  /* Bandeja como WhatsApp */
  .inbox-layout { grid-template-columns: 1fr !important; height: 100% !important; }
  .inbox-list { display: flex !important; height: 100%; border-right: 0; }
  .inbox-layout:not(:has(#chat-thread:not(.hidden))) .inbox-chat { display: none !important; }
  .inbox-layout:has(#chat-thread:not(.hidden)) .inbox-list { display: none !important; }
  .inbox-chat { height: 100%; }
  .inbox-header { padding: 0.9rem 1rem 0.75rem !important; }
  .inbox-header h2 { font-size: 1.35rem; padding-right: 56px; }
  .filter-pills { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
  .filter-pills::-webkit-scrollbar { display: none; }
  .filter-pills .pill { flex: 0 0 auto; }
  .filter-pills .pill.active { color: #fff !important; }

  .chat-header { padding: 0.6rem 0.75rem !important; gap: 0.5rem; flex-wrap: nowrap; }
  .chat-contact { min-width: 0; flex: 1; gap: 0.6rem; }
  .chat-contact .avatar { width: 38px; height: 38px; flex: 0 0 38px; }
  .chat-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-meta { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-actions { flex: 0 0 auto; }
  .chat-actions label span { font-size: 0.8rem; }
  #chat-control-state { font-size: 0.78rem !important; padding: 0.45rem 0.85rem !important; }
  .chat-messages { padding: 0.75rem !important; }
  .chat-composer { position: sticky; bottom: 0; padding: 0.5rem !important; gap: 0.5rem; background: var(--surface); }
  .chat-composer textarea { font-size: 16px; min-height: 44px; }
  .chat-composer .btn-primary { min-height: 44px; padding: 0 1rem; }

  .chat-back {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 38px; height: 38px; margin-right: 2px; border: 0; border-radius: 50%;
    background: var(--primary-soft, rgba(13, 27, 20, .06)); color: var(--primary);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
  }

  /* La guía paso a paso tapa la pantalla en el celular */
  .coachmark { display: none !important; }
  .coach-target { box-shadow: none !important; }

  /* Botón de tema: arriba a la derecha, sin tapar la barra */
  #theme-toggle-fab { top: 10px !important; bottom: auto !important; right: 10px !important; width: 40px !important; height: 40px !important; z-index: 70; }
}