/* ==========================================================================
 * MapacheXMPP Web — Diseño visual nativo MapacheXMPP para iOS (v6)
 * Motor XMPP: Converse.js 14.0.1 (intacto)
 * Referencia principal: MapacheXMPP para iOS (Modo Claro + Modo Oscuro opcional)
 * ========================================================================== */

:root,
html[data-mapache-scheme="light"] {
  --mp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mp-bg: #ffffff;
  --mp-bg-grouped: #f2f2f7;
  --mp-bg-desktop-auth: #f2f2f7;
  --mp-surface: #ffffff;
  --mp-surface-translucent: rgba(255, 255, 255, 0.94);
  --mp-fill: #f2f2f7;
  --mp-fill-strong: #e5e5ea;
  --mp-text: #000000;
  --mp-text-secondary: #6c6c70;
  --mp-text-tertiary: #8e8e93;
  --mp-blue: #007aff;
  --mp-blue-hover: #0066d6;
  --mp-blue-soft: rgba(0, 122, 255, 0.12);
  --mp-welcome-solid-text: #000000;
  --mp-bubble-out: #deedff;
  --mp-bubble-out-text: #000000;
  --mp-bubble-out-meta: #4a5d73;
  --mp-bubble-in: #f2f2f7;
  --mp-bubble-in-text: #000000;
  --mp-bubble-in-meta: #6c6c70;
  --mp-separator: rgba(60, 60, 67, 0.16);
  --mp-pill-bg: #ffffff;
  --mp-pill-border: rgba(0, 0, 0, 0.08);
  --mp-pill-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  --mp-sheet-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  --mp-green: #34c759;
  --mp-orange: #ff9500;
  --mp-red: #ff3b30;
  --mp-muc-avatar-bg: #9bb1c9;
  --mp-logo-tile: #eaf0f6;

  /* Variables internas de Converse.js sincronizadas con iOS Claro */
  --background-color: #ffffff;
  --foreground-color: #000000;
  --heading-color: #000000;
  --converse-heading-color: #000000;
  --text-color: #000000;
  --subdued-color: #8e8e93;
  --primary-color: #007aff;
  --secondary-color: #6c6c70;
  --chat-color: #007aff;
  --muc-color: #007aff;
  --link-color: #007aff;
  --chat-head-color: #ffffff;
  --chat-head-text-color: #000000;
  --controlbox-head-color: #ffffff;
  --list-item-hover-color: #f2f2f7;
  --message-text-color: #000000;
  color-scheme: light;
}

html[data-mapache-scheme="dark"] {
  --mp-bg: #000000;
  --mp-bg-grouped: #000000;
  --mp-bg-desktop-auth: #000000;
  --mp-surface: #1c1c1e;
  --mp-surface-translucent: rgba(28, 28, 30, 0.92);
  --mp-fill: #2c2c2e;
  --mp-fill-strong: #3a3a3c;
  --mp-text: #ffffff;
  --mp-text-secondary: #aeaeb2;
  --mp-text-tertiary: #8e8e93;
  --mp-blue: #0a84ff;
  --mp-blue-hover: #409cff;
  --mp-blue-soft: rgba(10, 132, 255, 0.2);
  --mp-welcome-solid-text: #ffffff;
  --mp-bubble-out: #0a84ff;
  --mp-bubble-out-text: #ffffff;
  --mp-bubble-out-meta: rgba(255, 255, 255, 0.82);
  --mp-bubble-in: #262629;
  --mp-bubble-in-text: #ffffff;
  --mp-bubble-in-meta: #98989f;
  --mp-separator: rgba(84, 84, 88, 0.55);
  --mp-pill-bg: #2c2c2e;
  --mp-pill-border: rgba(255, 255, 255, 0.12);
  --mp-pill-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  --mp-sheet-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
  --mp-green: #30d158;
  --mp-orange: #ff9f0a;
  --mp-red: #ff453a;
  --mp-muc-avatar-bg: #48607a;
  --mp-logo-tile: #eaf0f6;

  /* Variables internas de Converse.js sincronizadas con iOS Oscuro */
  --background-color: #1c1c1e;
  --foreground-color: #ffffff;
  --heading-color: #ffffff;
  --converse-heading-color: #ffffff;
  --text-color: #ffffff;
  --subdued-color: #8e8e93;
  --primary-color: #0a84ff;
  --secondary-color: #aeaeb2;
  --chat-color: #0a84ff;
  --muc-color: #0a84ff;
  --link-color: #0a84ff;
  --chat-head-color: #1c1c1e;
  --chat-head-text-color: #ffffff;
  --controlbox-head-color: #000000;
  --list-item-hover-color: #2c2c2e;
  --message-text-color: #ffffff;
  color-scheme: dark;
}

/* Sobrescritura directa de variables internas que Converse redeclara en [data-converse-theme] */
#conversejs,
#conversejs.conversejs,
#conversejs.conversejs[data-converse-theme],
#conversejs.conversejs[data-bs-theme],
#converse-modals {
  --primary-color: var(--mp-blue) !important;
  --primary-color-dark: var(--mp-blue-hover) !important;
  --secondary-color: var(--mp-text-secondary) !important;
  --chat-color: var(--mp-blue) !important;
  --muc-color: var(--mp-blue) !important;
  --link-color: var(--mp-blue) !important;
  --heading-color: var(--mp-text) !important;
  --converse-heading-color: var(--mp-text) !important;
  --foreground-color: var(--mp-text) !important;
  --background-color: var(--mp-surface) !important;
  --text-color: var(--mp-text) !important;
  --subdued-color: var(--mp-text-tertiary) !important;
  --highlight-color: var(--mp-blue-soft) !important;
  --list-item-hover-color: var(--mp-fill) !important;
  --list-item-open-color: var(--mp-blue-soft) !important;
  /* Colores semánticos de presencia y estado intactos */
  --chat-status-online: var(--mp-green) !important;
  --chat-status-away: var(--mp-orange) !important;
  --chat-status-busy: var(--mp-red) !important;
  --chat-status-offline: var(--mp-text-tertiary) !important;
  --error-color: var(--mp-red) !important;
  --warning-color: var(--mp-orange) !important;
  --success-color: var(--mp-blue) !important;
}

/* ==========================================================================
 * 1. BASE GLOBAL Y ÁREAS SEGURAS DE iOS (SIN DOBLE SAFE-AREA EN BARRA INFERIOR)
 * ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

converse-root,
converse-root.converse-fullscreen,
#conversejs,
#conversejs.converse-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  --fullpage-chat-height: 100% !important;
  --fullpage-chat-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  overflow: hidden !important;
}

/* Cuando el teclado virtual se abre en conversación, adaptar altura al visualViewport */
body[data-keyboard-open] converse-root,
body[data-keyboard-open] #conversejs,
body[data-keyboard-open] #conversejs.converse-fullscreen {
  top: var(--vv-offset-top, 0px) !important;
  bottom: auto !important;
  height: var(--vvh, 100dvh) !important;
  max-height: var(--vvh, 100dvh) !important;
}

#conversejs .converse-chatboxes {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: var(--mp-bg) !important;
}

.hidden {
  display: none !important;
}

#conversejs .fade-in,
#conversejs .visible {
  opacity: 1 !important;
  animation: none !important;
}

#conversejs h1,
#conversejs h2,
#conversejs h3 {
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
}

.mapache-noscript {
  padding: 32px 24px;
  text-align: center;
  font-family: var(--mp-font);
}

/* ==========================================================================
 * 2. ELIMINACIÓN ABSOLUTA DE IDENTIDAD GRÁFICA DE CONVERSE.JS
 * ========================================================================== */

converse-brand-logo,
converse-brand-heading,
converse-logo,
converse-bg,
converse-footer,
converse-controlbox-navbar,
converse-controlbox-buttons,
converse-headlines-feeds-list,
converse-minimized-chats,
converse-user-profile,
.converse-svg-logo,
.brand-heading,
.brand-name-wrapper,
.brand-name,
.byline,
#conversejs a[href*="conversejs.org"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
 * 3. BOTONES CIRCULARES Y PÍLDORAS COMUNES DE iOS
 * ========================================================================== */

.mp-circle-btn,
#conversejs .mp-circle-btn {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid var(--mp-pill-border) !important;
  background: var(--mp-pill-bg) !important;
  box-shadow: var(--mp-pill-shadow) !important;
  color: var(--mp-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.15s ease;
  flex-shrink: 0;
}

.mp-circle-btn:active,
#conversejs .mp-circle-btn:active {
  transform: scale(0.94);
}

.mp-circle-btn svg,
#conversejs .mp-circle-btn svg {
  width: 20px !important;
  height: 20px !important;
}

.mp-pill-btn,
#conversejs .mp-pill-btn {
  appearance: none;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 248px;
  height: 46px !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  font-family: var(--mp-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.15s ease, background-color 0.15s ease;
  text-decoration: none;
}

.mp-pill-btn:active,
#conversejs .mp-pill-btn:active {
  transform: scale(0.97);
}

.mp-pill-btn--outline,
#conversejs .mp-pill-btn--outline {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  border: 1.4px solid var(--mp-blue) !important;
}

.mp-pill-btn--solid,
#conversejs .mp-pill-btn--solid {
  background: var(--mp-blue) !important;
  color: var(--mp-welcome-solid-text) !important;
  border: 1.4px solid var(--mp-blue) !important;
}

.mp-pill-btn--full,
#conversejs .mp-pill-btn--full {
  width: 100% !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

.mp-logo-tile {
  width: min(60vw, 224px);
  height: min(60vw, 224px);
  background: var(--mp-logo-tile);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
}

.mp-logo-tile img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.mp-logo-tile--small {
  width: 84px;
  height: 84px;
  border-radius: 20px;
}

.mp-logo-tile--about {
  width: 184px;
  height: 184px;
}

.mp-logo-tile--desktop {
  width: 112px;
  height: 112px;
  border-radius: 26px;
}

/* ==========================================================================
 * 4. ESTADO NO AUTENTICADO (BIENVENIDA iOS, INICIAR SESIÓN, CREAR CUENTA)
 * ========================================================================== */

body[data-mapache-auth="unauthenticated"] converse-chat,
body[data-mapache-auth="unauthenticated"] converse-muc,
body[data-mapache-auth="unauthenticated"] .mp-nav-header,
body[data-mapache-auth="unauthenticated"] .mp-tabbar,
body[data-mapache-auth="unauthenticated"] .mp-fab,
body[data-mapache-auth="unauthenticated"] .mp-chats-pane,
body[data-mapache-auth="unauthenticated"] .mp-settings-pane,
body[data-mapache-auth="unauthenticated"] .mp-desktop-empty,
body[data-mapache-auth="unauthenticated"] #converse-roster,
body[data-mapache-auth="unauthenticated"] #chatrooms {
  display: none !important;
}

body[data-mapache-auth="unauthenticated"] #controlbox {
  display: flex !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--mp-bg) !important;
}

body[data-mapache-auth="unauthenticated"] #controlbox .box-flyout {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--mp-bg) !important;
  display: flex !important;
  flex-direction: column !important;
}

body[data-mapache-auth="unauthenticated"] #controlbox .controlbox-pane {
  width: 100% !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: var(--mp-bg) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

@media (min-width: 768px) {
  body[data-mapache-auth="unauthenticated"] #controlbox,
  body[data-mapache-auth="unauthenticated"] #controlbox .box-flyout {
    background: var(--mp-bg-desktop-auth) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body[data-mapache-auth="unauthenticated"] #controlbox .controlbox-pane {
    max-width: 440px !important;
    height: auto !important;
    max-height: min(880px, 94dvh) !important;
    background: var(--mp-surface) !important;
    border-radius: 26px !important;
    border: 1px solid var(--mp-separator) !important;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08) !important;
  }
}

/* Control de sub-pantallas no autenticadas */
#controlbox[data-unauth-step="welcome"] .mp-auth-subheader,
#controlbox[data-unauth-step="welcome"] .mp-auth-brand,
#controlbox[data-unauth-step="welcome"] converse-login-form,
#controlbox[data-unauth-step="welcome"] converse-registration-form,
#controlbox[data-unauth-step="welcome"] converse-spinner {
  display: none !important;
}

#controlbox[data-unauth-step="login"] .mp-welcome,
#controlbox[data-unauth-step="login"] converse-registration-form {
  display: none !important;
}

#controlbox[data-unauth-step="register"] .mp-welcome,
#controlbox[data-unauth-step="register"] converse-login-form {
  display: none !important;
}

/* Pantalla de Bienvenida (Captura 1) */
.mp-welcome {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100%;
  background: var(--mp-surface);
}

.mp-welcome__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(54px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  border-bottom: 0.5px solid var(--mp-separator);
}

.mp-welcome__spacer {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.mp-welcome__brand,
#conversejs .mp-welcome__brand {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  color: var(--mp-text) !important;
  text-align: center;
}

.mp-welcome__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px calc(30px + env(safe-area-inset-bottom, 0px));
  gap: 24px;
}

.mp-welcome__copy {
  width: 100%;
  max-width: 360px;
  color: var(--mp-text);
  font-size: 16.5px;
  line-height: 1.38;
  letter-spacing: -0.01em;
}

.mp-welcome__copy p {
  margin: 0 0 18px;
}

.mp-welcome__copy p:last-child {
  margin-bottom: 0;
}

.mp-welcome__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding-top: 4px;
}

/* Subpantalla Iniciar sesión / Crear cuenta */
.mp-auth-subheader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: calc(54px + env(safe-area-inset-top, 0px));
  padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 8px;
  border-bottom: 0.5px solid var(--mp-separator);
}

.mp-auth-subheader__title,
#conversejs .mp-auth-subheader__title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--mp-text) !important;
}

.mp-auth-brand {
  padding: 22px 24px 6px;
  display: flex;
  justify-content: center;
}

#controlbox converse-login-form,
#controlbox converse-registration-form {
  display: block;
  width: 100% !important;
  max-width: 390px !important;
  margin: 0 auto !important;
  padding: 12px 24px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#controlbox converse-login-form form,
#controlbox converse-registration-form form {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#controlbox converse-login-form .title,
#controlbox converse-registration-form .title,
#controlbox converse-registration-form legend {
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--mp-text-secondary) !important;
  text-align: center !important;
  margin-bottom: 14px !important;
}

#controlbox converse-login-form label,
#controlbox converse-registration-form label {
  display: block;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--mp-text-secondary) !important;
  margin-bottom: 6px !important;
}

#controlbox converse-login-form input[type="text"],
#controlbox converse-login-form input[type="password"],
#controlbox converse-login-form input[type="url"],
#controlbox converse-login-form input[type="email"],
#controlbox converse-registration-form input[type="text"],
#controlbox converse-registration-form input[type="password"],
#controlbox converse-registration-form input[type="url"],
#controlbox converse-registration-form input[type="email"],
.mp-ios-input {
  width: 100% !important;
  height: 46px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  font-size: 16px !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#controlbox converse-login-form input:focus,
#controlbox converse-registration-form input:focus,
.mp-ios-input:focus {
  outline: none !important;
  border-color: var(--mp-blue) !important;
  background: var(--mp-surface) !important;
}

#controlbox converse-login-form .form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 18px !important;
  padding-left: 0 !important;
}

#controlbox converse-login-form .form-check-input {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  accent-color: var(--mp-blue);
}

#controlbox converse-login-form .form-check-label {
  margin: 0 !important;
  font-size: 14px !important;
  color: var(--mp-text) !important;
}

#controlbox converse-login-form button[type="submit"],
#controlbox converse-registration-form button[type="submit"],
#controlbox converse-registration-form input[type="submit"] {
  width: 100% !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: none !important;
  background: var(--mp-blue) !important;
  color: #ffffff !important;
  font-family: var(--mp-font) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  cursor: pointer;
  box-shadow: none !important;
}

#controlbox converse-register-link,
.mp-conn-toggle-wrap {
  display: block;
  text-align: center;
  margin-top: 14px;
}

#controlbox converse-register-link a,
.mp-text-link {
  appearance: none;
  background: none;
  border: none;
  padding: 6px 8px;
  color: var(--mp-blue) !important;
  font-family: var(--mp-font);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* ==========================================================================
 * 5. LAYOUT AUTENTICADO: MOBILE-FIRST Y PANEL DIVIDIDO DE ESCRITORIO
 * ========================================================================== */

body[data-mapache-auth="authenticated"] .mp-welcome,
body[data-mapache-auth="authenticated"] .mp-auth-subheader,
body[data-mapache-auth="authenticated"] .mp-auth-brand,
body[data-mapache-auth="authenticated"] converse-login-form,
body[data-mapache-auth="authenticated"] converse-registration-form {
  display: none !important;
}

body[data-mapache-auth="authenticated"] #controlbox {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--mp-surface) !important;
  height: 100% !important;
}

body[data-mapache-auth="authenticated"] #controlbox .box-flyout {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--mp-surface) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body[data-mapache-auth="authenticated"] #controlbox .controlbox-pane {
  flex: 1 1 auto !important;
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--mp-surface) !important;
}

body[data-mapache-auth="authenticated"] #controlbox[data-mapache-tab="settings"] .controlbox-pane {
  background: var(--mp-bg-grouped) !important;
}

/* Comportamiento móvil (< 768px): vista única con transición fluida */
@media (max-width: 767.98px) {
  body[data-mapache-auth="authenticated"] #controlbox {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
  }

  body[data-mapache-auth="authenticated"][data-mapache-active-chat="true"] #controlbox {
    display: none !important;
  }

  body[data-mapache-auth="authenticated"] .mp-desktop-empty {
    display: none !important;
  }

  body[data-mapache-auth="authenticated"] converse-chat:not(.hidden),
  body[data-mapache-auth="authenticated"] converse-muc:not(.hidden) {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    height: 100% !important;
    animation: mpChatSlideIn 0.18s cubic-bezier(0.32, 0.72, 0, 1);
  }
}

/* Comportamiento iPad y Escritorio (>= 768px): Panel lateral + Panel principal */
@media (min-width: 768px) {
  body[data-mapache-auth="authenticated"] #conversejs #controlbox {
    position: relative !important;
    display: flex !important;
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
    height: 100% !important;
    overflow: hidden !important;
    border-right: 0.5px solid var(--mp-separator) !important;
    z-index: 3;
  }

  body[data-mapache-auth="authenticated"] #conversejs #controlbox .box-flyout {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 360px !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  body[data-mapache-auth="authenticated"] #conversejs converse-chat:not(.hidden),
  body[data-mapache-auth="authenticated"] #conversejs converse-muc:not(.hidden) {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    width: calc(100% - 360px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 360px) !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body[data-mapache-auth="authenticated"] #conversejs converse-chat .box-flyout,
  body[data-mapache-auth="authenticated"] #conversejs converse-muc .box-flyout {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
  }

  body[data-mapache-auth="authenticated"] #conversejs converse-controlbox-navback {
    display: none !important;
  }

  body[data-mapache-auth="authenticated"][data-mapache-active-chat="false"] .mp-desktop-empty {
    display: flex !important;
  }

  body[data-mapache-auth="authenticated"][data-mapache-active-chat="true"] .mp-desktop-empty {
    display: none !important;
  }
}

@keyframes mpChatSlideIn {
  from {
    opacity: 0.92;
    transform: translateX(14px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Panel vacío de escritorio */
.mp-desktop-empty {
  display: none;
  flex: 1 1 auto;
  height: 100%;
  background: var(--mp-bg);
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.mp-desktop-empty__card {
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.mp-desktop-empty__title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--mp-text);
}

.mp-desktop-empty__desc {
  margin: 0;
  font-size: 15px;
  color: var(--mp-text-secondary);
  line-height: 1.45;
}

.mp-desktop-empty__actions {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}

/* ==========================================================================
 * 6. CABECERA iOS LARGE TITLE SIMPLIFICADA, FAB AZUL Y PESTAÑAS INFERIORES
 * ========================================================================== */

.mp-nav-header {
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 4px;
  background: var(--mp-surface-translucent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  flex-shrink: 0;
  z-index: 5;
}

#controlbox[data-mapache-tab="settings"] .mp-nav-header {
  background: var(--mp-bg-grouped);
}

.mp-large-title,
#conversejs .mp-large-title {
  margin: 0 !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  color: var(--mp-text) !important;
}

/* Botón flotante circular azul de nuevo chat (inmediatamente encima de la barra inferior rebajada) */
.mp-fab,
#conversejs .mp-fab {
  position: absolute !important;
  right: 18px !important;
  bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  width: 54px !important;
  height: 54px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--mp-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.34), 0 2px 6px rgba(0, 0, 0, 0.14) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  z-index: 12 !important;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.mp-fab:hover,
#conversejs .mp-fab:hover {
  background: var(--mp-blue-hover) !important;
}

.mp-fab:active,
#conversejs .mp-fab:active {
  transform: scale(0.94);
}

.mp-fab svg,
#conversejs .mp-fab svg {
  width: 25px !important;
  height: 25px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* El botón flotante desaparece al entrar en un chat o fuera de la pestaña Chats */
body[data-mapache-active-chat="true"] .mp-fab,
#controlbox:not([data-mapache-tab="chats"]) .mp-fab {
  display: none !important;
}

/* Visibilidad de pestañas dentro de #controlbox */
#controlbox[data-mapache-tab="chats"] #converse-roster,
#controlbox[data-mapache-tab="chats"] #chatrooms,
#controlbox[data-mapache-tab="chats"] .mp-settings-pane {
  display: none !important;
}

#controlbox[data-mapache-tab="contacts"] .mp-chats-pane,
#controlbox[data-mapache-tab="contacts"] #chatrooms,
#controlbox[data-mapache-tab="contacts"] .mp-settings-pane {
  display: none !important;
}

#controlbox[data-mapache-tab="groups"] .mp-chats-pane,
#controlbox[data-mapache-tab="groups"] #converse-roster,
#controlbox[data-mapache-tab="groups"] .mp-settings-pane {
  display: none !important;
}

#controlbox[data-mapache-tab="settings"] .mp-chats-pane,
#controlbox[data-mapache-tab="settings"] #converse-roster,
#controlbox[data-mapache-tab="settings"] #chatrooms {
  display: none !important;
}

/* Barra inferior de pestañas iOS (Cambio 4: lo más baja posible respetando únicamente safe-area-inset-bottom) */
.mp-tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  margin: 0 !important;
  min-height: calc(46px + env(safe-area-inset-bottom, 0px));
  padding: 3px 4px max(2px, env(safe-area-inset-bottom, 0px));
  background: var(--mp-surface);
  border-top: 0.5px solid var(--mp-separator);
  flex-shrink: 0;
  z-index: 10;
}

.mp-tabbar__btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mp-text-tertiary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 1px 0 0;
  margin: 0;
  cursor: pointer;
  font-family: var(--mp-font);
  transition: color 0.15s ease;
}

.mp-tabbar__btn.is-active {
  color: var(--mp-blue);
}

.mp-tabbar__icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mp-tabbar__icon svg {
  width: 22px;
  height: 22px;
}

.mp-tabbar__label {
  font-size: 10px;
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.mp-tabbar__badge {
  position: absolute;
  top: -4px;
  right: -10px;
  min-width: 17px;
  height: 17px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mp-red);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================================================
 * 7. BUSCADOR Y LISTA DE CONVERSACIONES (`Chats` — CAPTURA 4)
 * ========================================================================== */

.mp-chats-pane {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.mp-search {
  margin: 4px 16px 10px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  background: var(--mp-fill);
  display: flex;
  align-items: center;
  gap: 7px;
}

.mp-search__icon {
  width: 16px;
  height: 16px;
  color: var(--mp-text-tertiary);
  display: inline-flex;
  flex-shrink: 0;
}

.mp-search__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--mp-text);
  font-family: var(--mp-font);
  font-size: 16px;
  outline: none;
}

.mp-search__input::placeholder {
  color: var(--mp-text-tertiary);
}

.mp-chats-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 84px;
}

.mp-chat-row {
  position: relative;
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 14px 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--mp-font);
  transition: background-color 0.12s ease;
}

.mp-chat-row::after {
  content: "";
  position: absolute;
  left: 78px;
  right: 0;
  bottom: 0;
  height: 0.5px;
  background: var(--mp-separator);
}

.mp-chat-row:hover {
  background: var(--mp-fill);
}

.mp-chat-row.is-active {
  background: var(--mp-blue-soft);
}

.mp-chat-row__avatar {
  position: relative;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
}

/* Avatares circulares globales (incluyendo iniciales SVG/div internas de Converse) */
#conversejs converse-avatar,
#conversejs converse-avatar > *,
#conversejs converse-avatar .avatar,
#conversejs converse-avatar .avatar-initials,
#conversejs converse-avatar img,
#conversejs converse-avatar svg {
  border-radius: 50% !important;
  overflow: hidden !important;
}

.mp-chat-row__avatar converse-avatar,
.mp-chat-row__avatar converse-avatar > *,
.mp-chat-row__avatar converse-avatar img,
.mp-chat-row__avatar converse-avatar svg,
.mp-chat-row__avatar .avatar {
  width: 50px !important;
  height: 50px !important;
  border-radius: 50% !important;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-muc-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--mp-muc-avatar-bg);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-muc-avatar svg {
  width: 26px;
  height: 26px;
}

.mp-presence-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--mp-surface);
  background: var(--mp-green);
}

.mp-presence-dot--online {
  background: var(--mp-green);
}

.mp-presence-dot--away {
  background: var(--mp-orange);
}

.mp-presence-dot--dnd {
  background: var(--mp-red);
}

.mp-chat-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mp-chat-row__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mp-chat-row__name {
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--mp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mp-chat-row__lock {
  width: 13px;
  height: 13px;
  color: var(--mp-text-tertiary);
  display: inline-flex;
  flex-shrink: 0;
}

.mp-chat-row__meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.mp-chat-row__time {
  font-size: 14px;
  color: var(--mp-text-tertiary);
}

.mp-chat-row.is-unread .mp-chat-row__time {
  color: var(--mp-blue);
  font-weight: 500;
}

.mp-chat-row__chevron {
  width: 14px;
  height: 14px;
  color: var(--mp-text-tertiary);
  opacity: 0.55;
  display: inline-flex;
}

.mp-chat-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mp-chat-row__preview {
  font-size: 14.5px;
  color: var(--mp-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.mp-unread-pill {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--mp-blue);
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-empty-chats {
  padding: 44px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.mp-empty-chats__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-empty-chats__desc {
  margin: 0;
  max-width: 290px;
  font-size: 14.5px;
  color: var(--mp-text-tertiary);
  line-height: 1.4;
}

.mp-empty-chats__actions {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

/* ==========================================================================
 * 8. CONTACTOS (`converse-roster`) Y GRUPOS MUC (`converse-rooms-list`)
 * ========================================================================== */

.mp-section-bar {
  padding: 6px 16px 10px;
}

.mp-ios-inline-btn,
#conversejs .mp-ios-inline-btn {
  width: 100% !important;
  height: 40px !important;
  border-radius: 10px !important;
  border: none !important;
  background: var(--mp-fill) !important;
  color: var(--mp-blue) !important;
  font-family: var(--mp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  cursor: pointer;
}

.mp-ios-inline-btn svg {
  width: 17px;
  height: 17px;
}

#converse-roster,
#chatrooms {
  padding: 0 0 18px !important;
  margin: 0 !important;
  background: transparent !important;
}

/* Cambio 5: Unificación cromática completa de Contactos (#007AFF) sin verdes heredados de Converse */
#conversejs #converse-roster .controlbox-heading,
#conversejs #chatrooms .controlbox-heading {
  padding: 8px 16px 6px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  color: var(--mp-text-tertiary) !important;
}

#conversejs #converse-roster a.open-contacts-toggle,
#conversejs #converse-roster a.group-toggle,
#conversejs #chatrooms a.list-toggle {
  color: var(--mp-blue) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 16px 6px !important;
}

#conversejs #converse-roster a.group-toggle {
  width: 100% !important;
  background: var(--mp-bg-grouped) !important;
  border-top: 0.5px solid var(--mp-separator) !important;
  border-bottom: 0.5px solid var(--mp-separator) !important;
  color: var(--mp-blue) !important;
}

#conversejs #converse-roster a.open-contacts-toggle converse-icon svg,
#conversejs #converse-roster a.group-toggle converse-icon svg,
#conversejs #converse-roster .dropdown--contacts button converse-icon svg,
#conversejs #converse-roster .contact-actions converse-icon svg,
#conversejs #converse-roster .list-item-action converse-icon svg,
#conversejs #converse-roster .dropdown-menu converse-icon svg,
#conversejs #chatrooms .list-item-action converse-icon svg {
  fill: var(--mp-blue) !important;
  color: var(--mp-blue) !important;
}

#conversejs #converse-roster .dropdown--contacts button,
#conversejs #converse-roster .contact-actions button,
#conversejs #converse-roster .list-item-action button {
  color: var(--mp-blue) !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Buscador / filtro de contactos en azul MapacheXMPP */
#conversejs #converse-roster .items-filter-form {
  padding: 6px 16px 10px !important;
  margin: 0 !important;
  background: transparent !important;
}

#conversejs #converse-roster .items-filter-form input.items-filter,
#conversejs #converse-roster .items-filter-form select.state-type {
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  height: 36px !important;
  font-size: 15px !important;
  box-shadow: none !important;
}

#conversejs #converse-roster .items-filter-form .filter-by converse-icon.clickable {
  padding: 6px 8px !important;
  border-radius: 8px !important;
  color: var(--mp-text-tertiary) !important;
}

#conversejs #converse-roster .items-filter-form .filter-by converse-icon.clickable svg {
  fill: var(--mp-text-tertiary) !important;
}

#conversejs #converse-roster .items-filter-form .filter-by converse-icon.clickable.selected {
  background: var(--mp-blue-soft) !important;
  color: var(--mp-blue) !important;
}

#conversejs #converse-roster .items-filter-form .filter-by converse-icon.clickable.selected svg {
  fill: var(--mp-blue) !important;
}

/* Filas de contactos y grupos (eliminando fondos verdes .odd de Converse) */
#conversejs #converse-roster .list-item,
#conversejs #converse-roster .list-item.odd,
#conversejs #converse-roster .roster-group .list-item,
#conversejs #converse-roster .roster-group .list-item.odd,
#conversejs #chatrooms .list-item,
#conversejs #chatrooms .rooms-list .list-item {
  padding: 10px 16px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border-bottom: 0.5px solid var(--mp-separator) !important;
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

#conversejs #converse-roster .list-item:hover,
#conversejs #converse-roster .list-item.odd:hover,
#conversejs #chatrooms .list-item:hover {
  background: var(--mp-fill) !important;
}

#conversejs #converse-roster .list-item.open,
#conversejs #converse-roster .list-item.active,
#conversejs #chatrooms .list-item.open {
  background: var(--mp-blue-soft) !important;
}

#conversejs #converse-roster .list-item-link.open-chat {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  text-decoration: none !important;
  color: var(--mp-text) !important;
}

#conversejs #converse-roster .list-item-link.open-chat > span:first-child {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  overflow: visible !important;
  flex-shrink: 0;
}

#conversejs #converse-roster converse-avatar,
#conversejs #converse-roster converse-avatar > *,
#conversejs #converse-roster converse-avatar img,
#conversejs #converse-roster converse-avatar svg {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
}

#conversejs #converse-roster converse-icon.chat-status--avatar {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  margin: 0 !important;
  z-index: 4 !important;
  width: 13px !important;
  height: 13px !important;
  border-radius: 50% !important;
  background: var(--mp-surface) !important;
  padding: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  line-height: 1 !important;
}

#conversejs #converse-roster converse-icon.chat-status--avatar svg {
  width: 9px !important;
  height: 9px !important;
  display: block !important;
  flex-shrink: 0 !important;
}

#conversejs #converse-roster .contact-name,
#conversejs #chatrooms .room-name {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--mp-text) !important;
}

#conversejs #converse-roster .contact-name.unread-msgs {
  color: var(--mp-blue) !important;
  font-weight: 600 !important;
}

#conversejs #converse-roster .msgs-indicator.badge,
#conversejs #chatrooms .msgs-indicator.badge {
  background: var(--mp-blue) !important;
  color: #ffffff !important;
  border-radius: 999px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
}

/* Solicitudes de contacto entrantes: acciones en azul principal y destructivo en rojo */
#conversejs #converse-roster .request-actions .accept-xmpp-request,
#conversejs #converse-roster .accept-xmpp-request converse-icon svg {
  color: var(--mp-blue) !important;
  fill: var(--mp-blue) !important;
}

#conversejs #converse-roster .request-actions .decline-xmpp-request,
#conversejs #converse-roster .decline-xmpp-request converse-icon svg {
  color: var(--mp-red) !important;
  fill: var(--mp-red) !important;
}

/* Preservar siempre colores semánticos de presencia sobre avatares del roster */
#conversejs #converse-roster converse-icon.chat-status[color*="chat-status-online"] svg {
  fill: var(--mp-green) !important;
}
#conversejs #converse-roster converse-icon.chat-status[color*="chat-status-away"] svg {
  fill: var(--mp-orange) !important;
}
#conversejs #converse-roster converse-icon.chat-status[color*="chat-status-busy"] svg {
  fill: var(--mp-red) !important;
}
#conversejs #converse-roster converse-icon.chat-status[color*="chat-status-offline"] svg {
  fill: var(--mp-text-tertiary) !important;
}

/* ==========================================================================
 * 9. AJUSTES AGRUPADOS ESTILO iOS (CAPTURA 5) Y HOJA «ACERCA DE» (CAPTURA 2)
 * ========================================================================== */

.mp-settings-pane {
  padding: 4px 16px 28px;
  background: var(--mp-bg-grouped);
  min-height: 100%;
}

.mp-ios-group-label {
  padding: 14px 14px 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mp-text-secondary);
}

.mp-ios-group {
  background: var(--mp-surface);
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid var(--mp-separator);
}

.mp-ios-row {
  position: relative;
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--mp-text);
  font-family: var(--mp-font);
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.mp-ios-row + .mp-ios-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 0;
  height: 0.5px;
  background: var(--mp-separator);
}

.mp-ios-row:active {
  background: var(--mp-fill);
}

.mp-ios-row__avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--mp-fill);
  color: var(--mp-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-ios-row__avatar svg {
  width: 20px;
  height: 20px;
}

.mp-ios-row__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}

.mp-ios-row--danger .mp-ios-row__title {
  color: var(--mp-red);
}

.mp-ios-row__value {
  font-size: 15px;
  color: var(--mp-text-tertiary);
}

.mp-ios-row__chevron {
  width: 15px;
  height: 15px;
  color: var(--mp-text-tertiary);
  opacity: 0.55;
  display: inline-flex;
  flex-shrink: 0;
}

.mp-ios-select {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--mp-text-tertiary);
  font-family: var(--mp-font);
  font-size: 15.5px;
  text-align: right;
  padding-right: 4px;
  cursor: pointer;
  outline: none;
}

.mp-ios-footnote-box {
  padding: 12px 14px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-ios-footnote {
  margin: 0;
  font-size: 12.5px;
  color: var(--mp-text-tertiary);
  line-height: 1.4;
}

.mp-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border-radius: 10px;
  background: var(--mp-fill);
  gap: 2px;
}

.mp-segmented__btn,
#conversejs .mp-segmented__btn {
  height: 34px !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.mp-segmented__btn.is-active,
#conversejs .mp-segmented__btn.is-active {
  background: var(--mp-surface) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  font-weight: 600 !important;
}

/* Hoja Modal iOS («Acerca de» — Captura 2 y «Acceso rápido») */
.mp-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.36);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.mp-sheet {
  width: 100%;
  max-width: 500px;
  height: 92dvh;
  background: var(--mp-surface);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--mp-sheet-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: mpSheetUp 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

.mp-sheet--compact {
  height: auto;
  max-height: 86dvh;
}

@media (min-width: 768px) {
  .mp-sheet-backdrop {
    align-items: center;
    padding: 24px;
  }
  .mp-sheet {
    height: auto;
    max-height: 84dvh;
    border-radius: 24px;
  }
}

.mp-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--mp-separator);
}

.mp-sheet__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--mp-text);
}

.mp-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 22px 22px calc(28px + env(safe-area-inset-bottom, 0px));
}

.mp-quick-desc {
  margin: 0 0 14px;
  font-size: 14.5px;
  color: var(--mp-text-secondary);
  line-height: 1.42;
}

.mp-sheet__body .mp-ios-input {
  margin-bottom: 12px;
}

.mp-about {
  text-align: center;
  color: var(--mp-text);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mp-about > * {
  flex-shrink: 0;
}

.mp-about__lead {
  margin: 20px auto 18px;
  max-width: 348px;
  font-size: 16px;
  line-height: 1.42;
  color: var(--mp-text);
}

.mp-about__meta {
  margin: 0 0 20px;
}

.mp-about__version,
.mp-about__build {
  margin: 3px 0;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--mp-text);
}

.mp-about__contact {
  margin: 0 0 24px;
  width: 100%;
  max-width: 348px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--mp-fill);
  font-size: 14.5px;
  line-height: 1.45;
}

.mp-about__contact-label {
  margin: 0 0 8px;
  color: var(--mp-text-secondary);
  font-weight: 500;
}

.mp-about__contact-item {
  margin: 6px 0;
}

.mp-about__link {
  color: var(--mp-blue) !important;
  text-decoration: none !important;
  font-weight: 500;
  word-break: break-word;
}

.mp-about__link:hover,
.mp-about__link:active {
  text-decoration: underline !important;
}

.mp-about__footer {
  margin-top: 4px;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.42;
  color: var(--mp-text-secondary);
}

.mp-about__footer p {
  margin: 0;
}

.mp-about__divider {
  width: 100%;
  max-width: 348px;
  height: 0.5px;
  border: 0;
  margin: 22px auto 20px;
  background: var(--mp-separator);
}

.mp-about__legal {
  width: 100%;
  max-width: 348px;
  text-align: left;
  font-size: 11.5px;
  line-height: 1.58;
  color: var(--mp-text-secondary);
  padding-bottom: 8px;
}

.mp-about__legal-heading {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mp-text-tertiary);
}

.mp-about__legal-heading--sub {
  margin: 22px 0 12px;
  padding-top: 18px;
  border-top: 0.5px solid var(--mp-separator);
}

.mp-about__legal-group {
  margin: 0 0 16px;
}

.mp-about__legal-group:last-child {
  margin-bottom: 0;
}

.mp-about__legal-title {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--mp-text-secondary);
}

.mp-about__legal p {
  margin: 0 0 9px;
}

.mp-about__legal p:last-child {
  margin-bottom: 0;
}

.mp-about__legal ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-about__legal li {
  margin: 0 0 9px;
}

.mp-about__legal li:last-child {
  margin-bottom: 0;
}

.mp-about__legal strong {
  font-weight: 600;
  color: var(--mp-text-secondary);
}

.mp-about__legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  color: var(--mp-text-secondary) !important;
  background: transparent !important;
  padding: 0;
}

.mp-about__legal a {
  color: var(--mp-text-secondary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 0.5px !important;
  text-underline-offset: 2px !important;
  word-break: break-word;
}

.mp-about__legal a:hover,
.mp-about__legal a:active {
  opacity: 0.78;
}

.mp-about__license-block {
  margin: 0 0 16px;
  padding-top: 14px;
  border-top: 0.5px solid var(--mp-separator);
}

.mp-about__license-block:first-of-type {
  padding-top: 4px;
  border-top: 0;
}

.mp-about__license-name {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mp-text-secondary);
}

.mp-about__license-text {
  margin: 0;
  font-family: var(--mp-font);
  font-size: 10px;
  line-height: 1.54;
  color: var(--mp-text-tertiary);
  white-space: pre-wrap;
  word-break: break-word;
}

@keyframes mpFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mpSheetUp {
  from { transform: translateY(18px); }
  to { transform: translateY(0); }
}

/* ==========================================================================
 * 10. PANTALLA DE CONVERSACIÓN Y GRUPOS MUC (CAPTURAS 3 Y 4)
 * ========================================================================== */

converse-chat .box-flyout,
converse-muc .box-flyout {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--mp-bg) !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Cabecera de conversación estilo iOS con menú superior derecho (≡) */
converse-chat-heading,
converse-muc-heading {
  position: relative !important;
  display: block !important;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 8px !important;
  background: var(--mp-surface-translucent) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--mp-separator) !important;
  color: var(--mp-text) !important;
  flex-shrink: 0;
  z-index: 30;
}

converse-chat-heading .chatbox-title,
converse-muc-heading .chatbox-title {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 42px !important;
  background: transparent !important;
}

converse-chat-heading .chatbox-title--row,
converse-muc-heading .chatbox-title--row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Botón atrás en cápsula elevada (Captura 3) */
#conversejs converse-controlbox-navback {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0;
}

#conversejs converse-controlbox-navback converse-icon,
#conversejs converse-controlbox-navback .fa-arrow-left {
  height: 36px !important;
  min-width: 48px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mp-pill-border) !important;
  background: var(--mp-pill-bg) !important;
  box-shadow: var(--mp-pill-shadow) !important;
  color: var(--mp-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

#conversejs converse-controlbox-navback converse-icon svg {
  width: 16px !important;
  height: 16px !important;
  fill: var(--mp-text) !important;
  color: var(--mp-text) !important;
}

#conversejs converse-chat-heading converse-avatar,
#conversejs converse-muc-heading converse-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  flex-shrink: 0;
}

#conversejs converse-chat-heading converse-avatar img,
#conversejs converse-chat-heading converse-avatar svg,
#conversejs converse-muc-heading converse-avatar img,
#conversejs converse-muc-heading converse-avatar svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

#conversejs converse-chat-heading .chatbox-title__text,
#conversejs converse-muc-heading .chatbox-title__text {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  font-size: 16.5px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--mp-text) !important;
}

#conversejs converse-chat-heading .chatbox-title__text .user,
#conversejs converse-chat-heading .chatbox-title__text a,
#conversejs converse-muc-heading .chatbox-title__text .user,
#conversejs converse-muc-heading .chatbox-title__text a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-chat-subtitle {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--mp-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.mp-chat-subtitle.is-online::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-green);
  display: inline-block;
}

.mp-chat-subtitle.is-away::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-orange);
  display: inline-block;
}

.mp-chat-subtitle.is-dnd::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mp-red);
  display: inline-block;
}

converse-chat-heading .chat-head__desc,
converse-muc-heading .chat-head__desc {
  display: none !important;
}

/* Ocultar botonera nativa en cabecera y mostrar el botón de tres rayas azules (≡) */
converse-chat-heading .chatbox-title__buttons,
converse-muc-heading .chatbox-title__buttons {
  display: none !important;
}

.mp-header-menu-btn,
#conversejs .mp-header-menu-btn {
  width: 40px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid var(--mp-pill-border) !important;
  background: var(--mp-pill-bg) !important;
  box-shadow: var(--mp-pill-shadow) !important;
  color: var(--mp-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.14s ease, background-color 0.15s ease;
}

.mp-header-menu-btn:active,
#conversejs .mp-header-menu-btn:active {
  transform: scale(0.94);
  background: var(--mp-fill) !important;
}

.mp-header-menu-btn svg,
#conversejs .mp-header-menu-btn svg {
  width: 21px !important;
  height: 21px !important;
  stroke: var(--mp-blue) !important;
  color: var(--mp-blue) !important;
}

/* Menú desplegable superior derecho de conversación estilo iOS */
.mp-chat-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 12px;
  min-width: 256px;
  max-width: min(300px, calc(100vw - 24px));
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-separator);
  border-radius: 16px;
  box-shadow: var(--mp-sheet-shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  z-index: 80;
}

.mp-chat-menu__item {
  position: relative;
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--mp-text);
  font-family: var(--mp-font);
  font-size: 15px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  cursor: pointer;
}

.mp-chat-menu__item:hover,
.mp-chat-menu__item:active {
  background: var(--mp-fill);
}

.mp-chat-menu__icon {
  width: 20px;
  height: 20px;
  color: var(--mp-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-chat-menu__icon svg {
  width: 19px;
  height: 19px;
}

.mp-chat-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-chat-menu__meta {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mp-text-tertiary);
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--mp-fill);
  flex-shrink: 0;
}

/* Cuerpo de mensajes y píldora «Cifrado OMEMO» (Captura 4 derecha) */
#conversejs converse-chat .chat-body,
#conversejs converse-muc .chat-body,
#conversejs converse-muc.chatroom .box-flyout .chatroom-body {
  position: relative !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--mp-bg) !important;
}

#conversejs converse-muc .muc-form-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

#conversejs converse-muc converse-muc-chatarea,
#conversejs converse-muc.chatroom .box-flyout .chatroom-body converse-muc-chatarea {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow: hidden !important;
}

#conversejs converse-muc converse-muc-chatarea > .chat-area,
#conversejs converse-muc.chatroom .box-flyout .chatroom-body .chat-area {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  justify-content: flex-end !important;
  overflow: hidden !important;
}

#conversejs converse-muc converse-split-resize,
#conversejs converse-muc converse-muc-sidebar {
  display: none !important;
}

#conversejs converse-chat .chat-content,
#conversejs converse-muc .chat-content,
#conversejs converse-chat .chat-content.chat-content-sendbutton,
#conversejs converse-muc .chat-content.chat-content-sendbutton {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

#conversejs converse-chat-content,
#conversejs converse-muc-chat-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  width: 100% !important;
  background: var(--mp-bg) !important;
}

.mp-omemo-banner {
  align-self: center;
  margin: 8px auto 2px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--mp-fill);
  color: var(--mp-text-secondary);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  z-index: 2;
  flex-shrink: 0;
}

.mp-omemo-banner svg {
  width: 12px;
  height: 12px;
}

#conversejs .chat-content,
#conversejs .chat-content__messages,
#conversejs converse-messages {
  background: var(--mp-bg) !important;
}

#conversejs .chat-content__notifications {
  background: transparent !important;
  color: var(--mp-text-tertiary) !important;
  font-size: 12px !important;
  padding: 0 16px !important;
  min-height: 0 !important;
}

#conversejs .chat-content__notifications:empty {
  display: none !important;
}

#conversejs .separator {
  border: 0 !important;
  background: transparent !important;
}

#conversejs .new-msgs-indicator {
  background: var(--mp-fill) !important;
  color: var(--mp-text-secondary) !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  padding: 4px 12px !important;
  border: 0 !important;
}

#conversejs .new-msgs-indicator::before,
#conversejs .new-msgs-indicator::after {
  display: none !important;
}

.chat-content__messages {
  padding: 10px 12px 14px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Separadores de fecha estilo píldora iOS */
.message.date-separator {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 14px 0 10px !important;
  border: 0 !important;
}

.message.date-separator hr.separator {
  display: none !important;
}

.message.date-separator .separator-text {
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Burbujas de mensajes individuales y grupales (Captura 3) */
converse-chat-message {
  display: block;
}

converse-chat-message .message.chat-msg {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  padding: 2px 2px !important;
  margin: 6px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
}

converse-chat-message .message.chat-msg.chat-msg--followup {
  margin-top: 2px !important;
}

/* Avatares circulares junto a burbujas (Captura 3) */
converse-chat-message .message.chat-msg > a.show-msg-author-modal {
  flex-shrink: 0;
  align-self: flex-end;
  margin: 0 !important;
}

converse-chat-message .message.chat-msg converse-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  flex-shrink: 0;
}

converse-chat-message .message.chat-msg converse-avatar img,
converse-chat-message .message.chat-msg converse-avatar svg {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  display: block;
}

/* Mensajes propios a la derecha con avatar propio a la derecha (exacto a Captura 3) */
converse-chat-message .message.chat-msg:has(.chat-msg__content--me) {
  flex-direction: row-reverse !important;
}

converse-chat-message .message.chat-msg.chat-msg--followup:has(.chat-msg__content--them) {
  padding-left: 42px !important;
}

converse-chat-message .message.chat-msg.chat-msg--followup:has(.chat-msg__content--me) {
  padding-right: 42px !important;
}

/* Contenedor de burbuja */
converse-chat-message .chat-msg__content {
  position: relative;
  max-width: min(76%, 520px) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 8px 13px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  word-break: break-word;
}

/* Burbuja entrante (gris claro iOS #F2F2F7) */
converse-chat-message .chat-msg__content--them {
  background: var(--mp-bubble-in) !important;
  color: var(--mp-bubble-in-text) !important;
  border-radius: 18px 18px 18px 6px !important;
}

/* Burbuja saliente (azul celeste iOS #DEEDFF en claro / #0A84FF en oscuro) */
converse-chat-message .chat-msg__content--me {
  margin-left: auto !important;
  background: var(--mp-bubble-out) !important;
  color: var(--mp-bubble-out-text) !important;
  border-radius: 18px 18px 6px 18px !important;
}

converse-chat-message .message.chat-msg.chat-msg--followup .chat-msg__content {
  border-radius: 18px !important;
}

/* En chats 1:1 ocultar el nombre repetitivo del remitente; en MUC conservarlo arriba */
converse-chat converse-chat-message .chat-msg__author {
  display: none !important;
}

converse-muc converse-chat-message .chat-msg__content--me .chat-msg__author {
  display: none !important;
}

converse-muc converse-chat-message .chat-msg__content--them .chat-msg__author a {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* Reordenación tipo Captura 3: texto arriba, candado + hora debajo dentro de la burbuja */
converse-chat-message .chat-msg__body {
  order: 1;
  margin: 0 !important;
}

converse-chat-message .chat-msg__heading {
  order: 2;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 1px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.1 !important;
}

converse-chat-message .chat-msg__content--me .chat-msg__heading {
  justify-content: flex-end !important;
  color: var(--mp-bubble-out-meta) !important;
}

converse-chat-message .chat-msg__content--them .chat-msg__heading {
  justify-content: flex-start !important;
  color: var(--mp-bubble-in-meta) !important;
}

/* Candado antes de la hora como en Captura 3 (`🔒 23:15`) */
converse-chat-message .chat-msg__heading .fa-lock {
  order: -1;
}

converse-chat-message .chat-msg__heading .fa-lock svg {
  width: 11px !important;
  height: 11px !important;
  fill: currentColor !important;
}

converse-chat-message .chat-msg__time {
  color: inherit !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
}

converse-chat-message .chat-msg__text,
converse-chat-message converse-chat-message-body {
  font-size: 16px !important;
  line-height: 1.36 !important;
  color: inherit !important;
}

converse-chat-message .chat-msg__content--me a {
  color: inherit !important;
  text-decoration: underline;
}

converse-chat-message .chat-msg__receipt svg {
  width: 11px !important;
  height: 11px !important;
  fill: var(--mp-bubble-out-meta) !important;
}

/* Mensajes informativos de sala / estado */
.message.chat-info {
  text-align: center !important;
  font-size: 12px !important;
  color: var(--mp-text-tertiary) !important;
  margin: 6px auto !important;
}

/* ==========================================================================
 * 11. BARRA INFERIOR DE ESCRITURA, NOTAS DE VOZ Y REPRODUCTOR INTEGRADO
 *     Orden estricto: [1. Emoji] [2. Nuevo mensaje] [3. Micrófono] [4. Enviar]
 * ========================================================================== */

#conversejs converse-chat-bottom-panel,
#conversejs converse-muc-bottom-panel,
#conversejs converse-muc converse-muc-bottom-panel {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  margin: auto 0 0 !important;
  background: var(--mp-surface-translucent) !important;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--mp-separator) !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  flex-shrink: 0 !important;
  text-align: left !important;
  z-index: 20;
}

body[data-keyboard-open] #conversejs converse-chat-bottom-panel,
body[data-keyboard-open] #conversejs converse-muc-bottom-panel,
body[data-keyboard-open] #conversejs converse-muc converse-muc-bottom-panel {
  padding-bottom: 8px !important;
}

#conversejs converse-reply-preview:empty {
  display: none !important;
}

.mp-composer-notice {
  margin: 0 2px 7px;
  padding: 6px 12px;
  border-radius: 10px;
  background: var(--mp-fill);
  color: var(--mp-text-secondary);
  font-size: 13px;
  line-height: 1.35;
}

.mp-composer-notice.is-error {
  color: var(--mp-red);
}

#conversejs converse-message-form,
#conversejs converse-muc-message-form {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Evitar que formularios internos ocultos (ej. setNicknameButtonForm en MUC) generen barras duplicadas */
#conversejs form.setNicknameButtonForm,
#conversejs converse-muc-message-form form.hidden,
#conversejs converse-message-form form.hidden {
  display: none !important;
}

#conversejs converse-message-form form.chat-message-form,
#conversejs converse-muc-message-form form.chat-message-form,
#conversejs form.sendXMPPMessage:not(.setNicknameButtonForm):not(.hidden) {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  border-inline-end: 0 !important;
}

/* Mantener converse-chat-toolbar con ancho cero solo como ancla del selector de emojis */
#conversejs converse-chat-toolbar,
#conversejs .chat-toolbar {
  order: 0 !important;
  position: relative !important;
  width: 0 !important;
  height: 38px !important;
  flex: 0 0 0px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#conversejs converse-chat-toolbar > *:not(.toolbar-buttons),
#conversejs converse-chat-toolbar .send-button,
#conversejs converse-chat-toolbar .toolbar-buttons > *:not(converse-emoji-dropdown) {
  display: none !important;
}

#conversejs converse-chat-toolbar > .toolbar-buttons {
  position: relative !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

#conversejs converse-chat-toolbar converse-emoji-dropdown > button,
#conversejs converse-chat-toolbar converse-emoji-dropdown > a,
#conversejs converse-chat-toolbar converse-emoji-dropdown .toggle-emojis {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

#conversejs converse-emoji-dropdown .dropdown-menu.show {
  position: absolute !important;
  bottom: 46px !important;
  left: 0 !important;
  top: auto !important;
  transform: none !important;
  width: min(336px, calc(100vw - 24px)) !important;
  max-height: 320px !important;
  overflow-y: auto !important;
  z-index: 65 !important;
}

/* Botones de la barra inferior de escritura */
.mp-composer-btn,
#conversejs .mp-composer-btn {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--mp-blue) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 38px !important;
  cursor: pointer;
  transition: transform 0.14s ease, background-color 0.15s ease;
}

.mp-composer-btn:active,
#conversejs .mp-composer-btn:active {
  transform: scale(0.92);
}

.mp-composer-btn svg,
#conversejs .mp-composer-btn svg {
  width: 22px !important;
  height: 22px !important;
}

/* 1. Emoji a la izquierda */
#conversejs .mp-composer-btn--emoji {
  order: 1 !important;
}

/* 2. Campo «Mensaje» ocupando el máximo ancho horizontal posible */
#conversejs converse-message-form .suggestion-box,
#conversejs converse-muc-message-form .suggestion-box {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-end !important;
}

#conversejs converse-message-form .chat-textarea,
#conversejs converse-muc-message-form .chat-textarea {
  order: 2 !important;
  display: block !important;
  field-sizing: fixed !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 38px !important;
  height: 38px;
  max-height: 124px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-radius: 20px !important;
  border: 1px solid transparent !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  resize: none !important;
  box-shadow: none !important;
}

#conversejs converse-message-form .chat-textarea::placeholder,
#conversejs converse-muc-message-form .chat-textarea::placeholder {
  color: var(--mp-text-tertiary) !important;
}

#conversejs converse-message-form .chat-textarea:focus,
#conversejs converse-muc-message-form .chat-textarea:focus {
  outline: none !important;
  border-color: rgba(0, 126, 254, 0.35) !important;
}

/* 3. Micrófono siempre visible inmediatamente a la izquierda de Enviar */
#conversejs .mp-composer-btn--mic {
  order: 3 !important;
}

/* 4. Botón circular azul de Enviar a la derecha del todo */
#conversejs .mp-composer-btn--send {
  order: 4 !important;
  background: var(--mp-blue) !important;
  color: #ffffff !important;
}

#conversejs .mp-composer-btn--send svg {
  width: 19px !important;
  height: 19px !important;
  stroke: #ffffff !important;
  color: #ffffff !important;
}

/* Estado activo de grabación / vista previa de nota de voz */
#conversejs form.is-voice-active > .mp-composer-btn--emoji,
#conversejs form.is-voice-active > .suggestion-box,
#conversejs form.is-voice-active > textarea.chat-textarea,
#conversejs form.is-voice-active > .mp-composer-btn--mic,
#conversejs form.is-voice-active > .mp-composer-btn--send {
  display: none !important;
}

.mp-voice-bar {
  order: 5;
  flex: 1 1 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.mp-voice-btn,
#conversejs .mp-voice-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-voice-btn svg {
  width: 18px;
  height: 18px;
}

.mp-voice-btn--cancel {
  color: var(--mp-red);
}

.mp-voice-btn--stop {
  color: var(--mp-red);
}

.mp-voice-btn--play {
  color: var(--mp-blue);
}

.mp-voice-status {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 19px;
  background: var(--mp-fill);
  display: flex;
  align-items: center;
  gap: 8px;
}

.mp-voice-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mp-red);
  flex-shrink: 0;
  animation: mpVoicePulse 1s ease-in-out infinite;
}

@keyframes mpVoicePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.86); }
}

.mp-voice-timer {
  font-variant-numeric: tabular-nums;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mp-text);
  flex-shrink: 0;
}

.mp-voice-hint {
  font-size: 13px;
  color: var(--mp-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-voice-progress {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--mp-fill-strong);
  overflow: hidden;
}

.mp-voice-progress__fill {
  width: 0%;
  height: 100%;
  background: var(--mp-blue);
  border-radius: 999px;
  transition: width 0.1s linear;
}

/* Reproductor de audio integrado dentro de las burbujas de mensaje */
converse-chat-message converse-audio-player {
  display: block !important;
  width: min(264px, 66vw) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 2px 0 !important;
}

converse-chat-message converse-audio-player .audio-player {
  margin: 0 !important;
  padding: 6px 10px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, 0.045) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html[data-mapache-scheme="dark"] converse-chat-message converse-audio-player .audio-player {
  background: rgba(255, 255, 255, 0.12) !important;
}

converse-chat-message converse-audio-player .audio-player__caption {
  display: none !important;
}

converse-chat-message converse-audio-player .audio-player__play-btn {
  background: var(--mp-blue) !important;
  color: #ffffff !important;
}

converse-chat-message .chat-msg__content--me converse-audio-player .audio-player__play-btn {
  background: var(--mp-blue) !important;
  color: #ffffff !important;
}

html[data-mapache-scheme="dark"] converse-chat-message .chat-msg__content--me converse-audio-player .audio-player {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

html[data-mapache-scheme="dark"] converse-chat-message .chat-msg__content--me converse-audio-player .audio-player__time,
html[data-mapache-scheme="dark"] converse-chat-message .chat-msg__content--me converse-audio-player .audio-player__btn:not(.audio-player__play-btn),
html[data-mapache-scheme="dark"] converse-chat-message .chat-msg__content--me converse-audio-player .audio-player__btn:not(.audio-player__play-btn) converse-icon svg {
  color: rgba(255, 255, 255, 0.94) !important;
  fill: rgba(255, 255, 255, 0.94) !important;
}

html[data-mapache-scheme="dark"] converse-chat-message .chat-msg__content--me converse-audio-player .audio-player__play-btn {
  background: #ffffff !important;
  color: var(--mp-blue) !important;
}

converse-chat-message converse-audio-player .audio-player__play-btn converse-icon svg {
  fill: currentColor !important;
  color: currentColor !important;
}

converse-chat-message a.mp-voice-raw-link-hidden {
  display: none !important;
}

converse-chat-message a.mp-media-download {
  display: inline-flex;
  margin: 4px 0 2px 8px;
  color: var(--mp-blue);
  font-size: 0.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}

converse-chat-message audio.mp-inline-audio {
  display: block !important;
  width: min(256px, 66vw) !important;
  max-width: 100% !important;
  height: 38px !important;
  margin: 2px 0 !important;
  border-radius: 19px !important;
}

/* ==========================================================================
 * 12. PANTALLA DE LLAMADAS XMPP 1:1 (VOZ Y VÍDEO — WEBRTC / JINGLE)
 * ========================================================================== */

.mp-call-overlay {
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: linear-gradient(180deg, #161a22 0%, #0b0d12 100%);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(44px + env(safe-area-inset-top, 0px)) 24px calc(40px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
}

.mp-call__remote-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  background: #000000;
}

.mp-call__local-video {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: 16px;
  width: 112px;
  height: 156px;
  border-radius: 16px;
  object-fit: cover;
  background: #1c1c1e;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  z-index: 3;
}

.mp-call__header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-top: 12px;
}

.mp-call-overlay.is-video .mp-call__avatar {
  display: none;
}

.mp-call-overlay.is-video .mp-call__header {
  align-self: flex-start;
  align-items: flex-start;
  text-align: left;
  margin-top: 0;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.mp-call__avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-size: 38px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.mp-call__peer {
  margin: 0 !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  color: #ffffff !important;
}

.mp-call-overlay.is-video .mp-call__peer {
  font-size: 18px !important;
}

.mp-call__status {
  margin: 0;
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 320px;
  line-height: 1.38;
  font-variant-numeric: tabular-nums;
}

.mp-call__controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  width: 100%;
  max-width: 360px;
}

.mp-call-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: var(--mp-font);
  font-size: 12.5px;
  font-weight: 500;
}

.mp-call-btn svg {
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: 50%;
  transition: transform 0.14s ease, background-color 0.15s ease;
}

.mp-call-btn:active svg {
  transform: scale(0.93);
}

.mp-call-btn--accept svg {
  background: var(--mp-green);
  stroke: #ffffff;
}

.mp-call-btn--decline svg {
  background: var(--mp-red);
  stroke: #ffffff;
}

.mp-call-btn--ghost svg {
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  stroke: #ffffff;
}

.mp-call-btn--ghost.is-toggled svg {
  background: #ffffff;
  stroke: #000000;
}

/* ==========================================================================
 * 13. MODALES INTERNOS DE CONVERSE.JS MODERNIZADOS A ESTILO iOS (CAMBIO 3)
 * ========================================================================== */

.modal-backdrop,
.modal-backdrop.show,
#conversejs .modal-backdrop.show {
  opacity: 0 !important;
  pointer-events: none !important;
}

#conversejs .modal,
#converse-modals .modal,
.modal {
  z-index: 5200 !important;
  background: rgba(0, 0, 0, 0.38) !important;
}

#conversejs .modal-dialog,
#converse-modals .modal-dialog,
.modal-dialog {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 32px) !important;
  margin: 16px auto !important;
  width: calc(100% - 28px) !important;
  max-width: 440px !important;
}

#conversejs .modal-content,
#converse-modals .modal-content,
.modal-content {
  width: 100% !important;
  max-height: 88dvh !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  border: 0.5px solid var(--mp-separator) !important;
  border-radius: 22px !important;
  box-shadow: var(--mp-sheet-shadow) !important;
  font-family: var(--mp-font) !important;
  overflow: hidden !important;
}

/* Cabecera limpia estilo iOS (elimina por completo la franja gris-azulada heredada) */
#conversejs .modal-header,
#converse-modals .modal-header,
.modal-header {
  background: var(--mp-surface) !important;
  background-color: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  border-bottom: 0.5px solid var(--mp-separator) !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 22px 22px 0 0 !important;
}

#conversejs .modal-title,
#converse-modals .modal-title,
.modal-title {
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Botón de cierre circular coherente con MapacheXMPP */
#conversejs .modal-header button[data-bs-dismiss="modal"],
#converse-modals .modal-header button[data-bs-dismiss="modal"],
#conversejs .modal-header .btn-close,
.modal-header button[data-bs-dismiss="modal"] {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text-secondary) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  box-shadow: none !important;
  cursor: pointer;
}

#conversejs .modal-header button[data-bs-dismiss="modal"] converse-icon svg,
#converse-modals .modal-header button[data-bs-dismiss="modal"] converse-icon svg,
#conversejs .modal-header .btn svg {
  width: 14px !important;
  height: 14px !important;
  fill: var(--mp-text-secondary) !important;
  color: var(--mp-text-secondary) !important;
}

#conversejs .modal-body,
#converse-modals .modal-body,
.modal-body {
  padding: 18px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  font-size: 15px !important;
}

#conversejs .modal-footer,
#converse-modals .modal-footer,
.modal-footer {
  background: var(--mp-surface) !important;
  border-top: 0.5px solid var(--mp-separator) !important;
  padding: 12px 18px !important;
  gap: 8px !important;
}

#conversejs .modal-footer:empty,
#converse-modals .modal-footer:empty,
#conversejs .modal-footer:has(> button[data-bs-dismiss="modal"]:only-child),
#converse-modals .modal-footer:has(> button[data-bs-dismiss="modal"]:only-child) {
  display: none !important;
}

/* Pestañas internas (Perfil · Editar · OMEMO / Estado · Perfil · OMEMO) como Segmented Control de iOS */
#conversejs .modal-body .nav.nav-pills,
#converse-modals .modal-body .nav.nav-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  background: var(--mp-fill) !important;
  padding: 3px !important;
  border-radius: 10px !important;
  margin: 0 0 18px !important;
  gap: 2px !important;
  border: none !important;
}

#conversejs .modal-body .nav.nav-pills .nav-item,
#converse-modals .modal-body .nav.nav-pills .nav-item {
  flex: 1 1 0% !important;
  margin: 0 !important;
}

#conversejs .modal-body .nav.nav-pills .nav-link,
#converse-modals .modal-body .nav.nav-pills .nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 32px !important;
  padding: 5px 10px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--mp-text-secondary) !important;
  font-family: var(--mp-font) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

#conversejs .modal-body .nav.nav-pills .nav-link.active,
#converse-modals .modal-body .nav.nav-pills .nav-link.active {
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Campos, etiquetas y separadores dentro de modales */
#conversejs .modal-content label,
#converse-modals .modal-content label {
  color: var(--mp-text-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
}

#conversejs .modal-content .text-muted,
#converse-modals .modal-content .text-muted {
  color: var(--mp-text-tertiary) !important;
}

#conversejs .modal-content hr,
#converse-modals .modal-content hr {
  border-color: var(--mp-separator) !important;
  opacity: 1 !important;
  margin: 16px 0 !important;
}

#conversejs .modal-content input.form-control,
#conversejs .modal-content select.form-select,
#conversejs .modal-content select.form-control,
#conversejs .modal-content textarea.form-control,
#converse-modals .modal-content input.form-control,
#converse-modals .modal-content select.form-select,
#converse-modals .modal-content textarea.form-control,
.modal-content input.form-control,
.modal-content select.form-select,
.modal-content textarea.form-control {
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  min-height: 44px !important;
  padding: 8px 14px !important;
  font-family: var(--mp-font) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

#conversejs .modal-content input.form-control:focus,
#conversejs .modal-content textarea.form-control:focus,
#converse-modals .modal-content input.form-control:focus {
  outline: none !important;
  border-color: var(--mp-blue) !important;
  background: var(--mp-surface) !important;
}

/* Botones de modales: primarios y acciones positivas unificados en azul #007AFF (sin botones verdes) */
#conversejs .modal-content .btn-primary,
#conversejs .modal-content .btn-success,
#converse-modals .modal-content .btn-primary,
#converse-modals .modal-content .btn-success,
.modal-content .btn-primary,
.modal-content .btn-success {
  border-radius: 999px !important;
  background: var(--mp-blue) !important;
  border: 1px solid var(--mp-blue) !important;
  color: #ffffff !important;
  font-family: var(--mp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 8px 20px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#conversejs .modal-content .btn-primary converse-icon svg,
#conversejs .modal-content .btn-success converse-icon svg,
#converse-modals .modal-content .btn-primary converse-icon svg,
#converse-modals .modal-content .btn-success converse-icon svg {
  fill: #ffffff !important;
  color: #ffffff !important;
}

#conversejs .modal-content .btn-secondary,
#conversejs .modal-content .btn-outline-secondary,
#converse-modals .modal-content .btn-secondary,
#converse-modals .modal-content .btn-outline-secondary,
.modal-content .btn-secondary {
  border-radius: 999px !important;
  background: var(--mp-fill) !important;
  border: 1px solid transparent !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  min-height: 40px !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
}

#conversejs .modal-content .btn-danger,
#converse-modals .modal-content .btn-danger,
.modal-content .btn-danger {
  border-radius: 999px !important;
  background: rgba(255, 59, 48, 0.12) !important;
  border: 1px solid transparent !important;
  color: var(--mp-red) !important;
  font-family: var(--mp-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  min-height: 40px !important;
  padding: 8px 18px !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

#conversejs .modal-content .btn-danger converse-icon svg,
#converse-modals .modal-content .btn-danger converse-icon svg {
  fill: var(--mp-red) !important;
  color: var(--mp-red) !important;
}

/* Información de contacto (`converse-user-details-modal`) y huella OMEMO (`converse-omemo-fingerprints`) */
#conversejs converse-user-details-modal #profile-tabpanel .row,
#converse-modals converse-user-details-modal #profile-tabpanel .row {
  padding: 10px 12px !important;
  margin: 0 0 6px !important;
  border-radius: 12px !important;
  background: var(--mp-fill) !important;
  align-items: center !important;
}

#conversejs .modal-content .badge,
#converse-modals .modal-content .badge {
  background: var(--mp-blue-soft) !important;
  color: var(--mp-blue) !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
}

#conversejs .modal-content a:not(.nav-link):not(.btn),
#converse-modals .modal-content a:not(.nav-link):not(.btn) {
  color: var(--mp-blue) !important;
  text-decoration: none !important;
}

#conversejs converse-omemo-fingerprints .list-group-item,
#converse-modals converse-omemo-fingerprints .list-group-item {
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  border: 0.5px solid var(--mp-separator) !important;
  border-radius: 14px !important;
  margin-bottom: 10px !important;
  padding: 12px !important;
}

#conversejs converse-omemo-fingerprints code.fingerprint,
#converse-modals converse-omemo-fingerprints code.fingerprint {
  display: block !important;
  margin-top: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: var(--mp-surface) !important;
  color: var(--mp-text) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  word-break: break-all !important;
}

#conversejs converse-omemo-fingerprints .btn-group .btn,
#converse-modals converse-omemo-fingerprints .btn-group .btn {
  min-height: 30px !important;
  padding: 4px 12px !important;
  font-size: 12.5px !important;
}

/* Alertas internas de modales en estilo iOS */
#conversejs .modal-content .alert,
#converse-modals .modal-content .alert {
  border-radius: 12px !important;
  border: 0.5px solid var(--mp-separator) !important;
  background: var(--mp-fill) !important;
  color: var(--mp-text) !important;
  font-size: 14px !important;
}

#conversejs .dropdown-menu,
.dropdown-menu {
  background: var(--mp-surface) !important;
  border: 0.5px solid var(--mp-separator) !important;
  border-radius: 14px !important;
  box-shadow: var(--mp-sheet-shadow) !important;
  padding: 6px !important;
}

#conversejs .dropdown-item,
.dropdown-item {
  border-radius: 8px !important;
  color: var(--mp-text) !important;
  font-size: 15px !important;
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#conversejs .dropdown-item:hover,
.dropdown-item:hover {
  background: var(--mp-fill) !important;
}

/* ==========================================================================
 * 14. VENTANA «COMPARTIR UBICACIÓN» (CAMBIO 6) Y TARJETAS DE MAPA (CAMBIO 7)
 * ========================================================================== */

.mp-loc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 5600;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.mp-loc-modal {
  width: 100%;
  max-width: 372px;
  background: var(--mp-surface);
  color: var(--mp-text);
  border-radius: 22px;
  border: 0.5px solid var(--mp-separator);
  box-shadow: var(--mp-sheet-shadow);
  overflow: hidden;
  font-family: var(--mp-font);
  animation: mpSheetUp 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.mp-loc-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 16px 13px;
  border-bottom: 0.5px solid var(--mp-separator);
}

.mp-loc-modal__badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-loc-modal__badge svg {
  width: 19px;
  height: 19px;
}

.mp-loc-modal__title {
  flex: 1;
  margin: 0 !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em;
  color: var(--mp-text) !important;
}

.mp-loc-modal__close {
  width: 32px !important;
  height: 32px !important;
}

.mp-loc-modal__body {
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-loc-modal__lead {
  margin: 0;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.38;
  color: var(--mp-text);
}

.mp-loc-modal__sub {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.42;
  color: var(--mp-text-secondary);
}

.mp-loc-modal__sub code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--mp-fill);
  color: var(--mp-blue);
  font-size: 12.5px;
}

.mp-loc-modal__consent {
  margin-top: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--mp-fill);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--mp-text);
  cursor: pointer;
}

.mp-ios-checkbox {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--mp-blue);
  flex-shrink: 0;
}

.mp-loc-modal__error {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 59, 48, 0.12);
  color: var(--mp-red);
  font-size: 13px;
  line-height: 1.36;
}

.mp-loc-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 8px 18px 18px;
}

.mp-loc-modal__btn {
  appearance: none;
  height: 44px;
  border-radius: 999px;
  border: none;
  font-family: var(--mp-font);
  font-size: 15.5px;
  cursor: pointer;
  transition: transform 0.14s ease, opacity 0.15s ease;
}

.mp-loc-modal__btn:active {
  transform: scale(0.97);
}

.mp-loc-modal__btn--cancel {
  background: var(--mp-fill);
  color: var(--mp-text);
  font-weight: 500;
}

.mp-loc-modal__btn--confirm {
  background: var(--mp-blue);
  color: #ffffff;
  font-weight: 600;
}

.mp-loc-modal__btn--confirm:disabled {
  opacity: 0.65;
  cursor: default;
}

/* Tarjeta de miniatura de mapa dentro de las burbujas de mensaje (Cambio 7) */
.mp-location-raw-hidden {
  display: none !important;
}

#conversejs converse-chat-message .chat-msg__content:has(.mp-map-card) {
  padding: 6px 6px 5px !important;
  max-width: min(278px, 76vw) !important;
}

#conversejs converse-chat-message .chat-msg__content:has(.mp-map-card) .chat-msg__heading {
  padding: 2px 6px 0 !important;
}

#conversejs converse-chat-message .chat-msg__body:has(.mp-map-card) {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: 100% !important;
}

#conversejs converse-chat-message .chat-msg__body:has(.mp-map-card) > .chat-msg__body--wrapper:has(> .mp-location-raw-hidden) {
  display: none !important;
}

#conversejs converse-chat-message .chat-msg__content:has(.mp-map-card) converse-message-actions,
#conversejs converse-chat-message .chat-msg__content:has(.mp-map-card) .chat-msg__actions {
  display: none !important;
}

.mp-map-card {
  position: relative;
  width: min(258px, 70vw);
  max-width: 100%;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-separator);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  flex-shrink: 0;
}

.mp-map-card__preview {
  position: relative;
  display: block;
  width: 100%;
  height: 142px;
  overflow: hidden;
  background: #e8eef5;
  color: #3a5a78;
  text-decoration: none !important;
}

html[data-mapache-scheme="dark"] .mp-map-card__preview {
  background: #1f2937;
  color: #8faac7;
}

.mp-map-card__vector-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.mp-map-card__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mp-map-card__fallback-pin {
  position: relative;
  width: 30px;
  height: 40px;
  transform: translateY(-8px);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.22));
  z-index: 2;
}

.mp-map-card__fallback-pin svg {
  width: 100%;
  height: 100%;
}

.mp-map-card__leaflet {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 3;
  background: transparent !important;
  pointer-events: none;
}

.mp-map-card.is-tile-fallback .mp-map-card__leaflet {
  opacity: 0 !important;
}

.mp-map-card.has-live-tiles .mp-map-card__vector-bg {
  opacity: 0;
}

.mp-leaflet-pin {
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.28));
}

.mp-leaflet-pin svg {
  width: 32px;
  height: 42px;
  display: block;
}

.mp-map-card__attrib {
  position: absolute;
  right: 6px;
  top: 120px;
  z-index: 6;
  display: none;
  padding: 1.5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.84);
  color: #333333 !important;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none !important;
  white-space: nowrap;
}

.mp-map-card__attrib:hover,
.mp-map-card__attrib:active {
  text-decoration: underline !important;
}

.mp-map-card.has-live-tiles:not(.is-tile-fallback) .mp-map-card__attrib {
  display: inline-block;
}

html[data-mapache-scheme="dark"] .mp-map-card__attrib {
  background: rgba(28, 28, 30, 0.84);
  color: #d1d1d6 !important;
}

.mp-map-card__consent-btn {
  position: absolute;
  left: 50%;
  top: 98px;
  transform: translateX(-50%);
  z-index: 6;
  height: 28px;
  padding: 0 11px;
  border-radius: 999px;
  border: 0.5px solid var(--mp-separator);
  background: var(--mp-surface-translucent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--mp-blue);
  font-family: var(--mp-font);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.mp-map-card__consent-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.mp-map-card__footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  background: var(--mp-surface);
  color: var(--mp-text) !important;
  text-decoration: none !important;
  border-top: 0.5px solid var(--mp-separator);
}

.mp-map-card__icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--mp-blue-soft);
  color: var(--mp-blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mp-map-card__icon svg {
  width: 15px;
  height: 15px;
}

.mp-map-card__meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.24;
}

.mp-map-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mp-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-map-card__coords {
  font-size: 11.5px;
  color: var(--mp-text-secondary);
  font-variant-numeric: tabular-nums;
}

.mp-map-card__ext {
  width: 15px;
  height: 15px;
  color: var(--mp-blue);
  display: inline-flex;
  flex-shrink: 0;
}

.mp-map-card__ext svg {
  width: 15px;
  height: 15px;
}

/* =========================================================================
 * AJUSTES → NOTIFICACIONES (Web Push + XEP-0357)
 * ========================================================================= */

.mp-ios-row__value {
  margin-left: auto;
  font-size: 15px;
  color: var(--mp-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 165px;
}

.mp-ios-row__value--active {
  color: #34c759;
  font-weight: 500;
}

html[data-mapache-scheme="dark"] .mp-ios-row__value--active {
  color: #30d158;
}

.mp-notif-sheet {
  padding: 12px 16px 32px;
  background: var(--mp-bg-grouped);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mp-notif-switch-row {
  cursor: default;
  justify-content: space-between;
}

.mp-notif-sheet {
  display: block !important;
  padding-bottom: 28px !important;
}

.mp-notif-sheet > * {
  flex-shrink: 0;
}

.mp-ios-switch {
  position: relative;
  width: 51px;
  height: 31px;
  border-radius: 999px;
  border: none;
  padding: 2px;
  background: rgba(120, 120, 128, 0.32);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

html[data-mapache-scheme="dark"] .mp-ios-switch {
  background: rgba(120, 120, 128, 0.45);
}

.mp-ios-switch[aria-checked="true"] {
  background: #34c759;
}

html[data-mapache-scheme="dark"] .mp-ios-switch[aria-checked="true"] {
  background: #30d158;
}

.mp-ios-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mp-ios-switch__thumb {
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.22);
  transform: translateX(0);
  transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

.mp-ios-switch[aria-checked="true"] .mp-ios-switch__thumb {
  transform: translateX(20px);
}

.mp-notif-kv-row {
  cursor: default;
  justify-content: space-between;
  gap: 10px;
}

.mp-notif-kv-row .mp-ios-row__title {
  font-size: 15px;
}

.mp-notif-kv-val {
  font-size: 14.5px;
  color: var(--mp-text-secondary);
  text-align: right;
  word-break: break-word;
  max-width: 56%;
}

.mp-notif-kv-val--ok {
  color: #34c759;
  font-weight: 500;
}

html[data-mapache-scheme="dark"] .mp-notif-kv-val--ok {
  color: #30d158;
}

.mp-notif-kv-val--warn {
  color: #ff9500;
  font-weight: 500;
}

.mp-notif-kv-val--err {
  color: #ff3b30;
  font-weight: 500;
}

.mp-notif-banner {
  margin: 12px 4px 2px;
  padding: 11px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.4;
  background: var(--mp-surface);
  border: 0.5px solid var(--mp-separator);
  color: var(--mp-text);
}

.mp-notif-banner--error {
  border-color: rgba(255, 59, 48, 0.45);
  color: #ff3b30;
}

html[data-mapache-scheme="dark"] .mp-notif-banner--error {
  color: #ff6961;
}

.mp-notif-banner--ok {
  border-color: rgba(52, 199, 89, 0.45);
  color: #248a3d;
}

html[data-mapache-scheme="dark"] .mp-notif-banner--ok {
  color: #30d158;
}

.mp-notif-gw-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}

.mp-notif-gw-field label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mp-text-secondary);
}

.mp-notif-gw-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.mp-notif-gw-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border-radius: 10px;
  border: 0.5px solid var(--mp-separator);
  background: var(--mp-fill);
  color: var(--mp-text);
  font-family: var(--mp-font);
  font-size: 15px;
}

.mp-notif-gw-save {
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: none;
  background: var(--mp-blue);
  color: #ffffff;
  font-family: var(--mp-font);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

.mp-notif-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}



/* Gestión MUC: mismos colores y superficies de las hojas existentes. */
.mp-muc-body { display:block !important; overflow-wrap:anywhere; }
.mp-muc-body > * { flex-shrink:0; }
.mp-muc-field { display:block; margin:16px 0; color:var(--mp-text-secondary); font-size:14px; }
.mp-muc-field span { display:block; margin-bottom:6px; }
.mp-muc-field input,.mp-muc-field textarea { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--mp-separator); border-radius:12px; background:var(--mp-fill); color:var(--mp-text); font:inherit; }
.mp-muc-field textarea { resize:vertical; }
.mp-muc-button { display:block; width:100%; padding:12px 14px; margin:8px 0; text-align:left; border:0; border-radius:12px; background:var(--mp-fill); color:var(--mp-blue); font:inherit; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.mp-muc-button:disabled { opacity:.5; }
.mp-muc-danger { color:#e5484d; }
.mp-muc-help { color:var(--mp-text-secondary); font-size:14px; line-height:1.45; overflow-wrap:anywhere; }
.mp-muc-heading { color:var(--mp-text); font-weight:600; margin:20px 0 8px; }
.mp-muc-contacts { max-height:180px; overflow:auto; background:var(--mp-fill); border-radius:12px; }
.mp-muc-contacts label { display:flex; gap:10px; align-items:center; padding:10px; color:var(--mp-text); overflow-wrap:anywhere; }
.mp-muc-person { padding:10px 0; border-bottom:1px solid var(--mp-separator); color:var(--mp-text); overflow-wrap:anywhere; }
.mp-muc-person converse-avatar { float:left; margin-right:10px; }
.mp-muc-person > div { font-size:13px; color:var(--mp-text-secondary); }
.mp-chat-menu { max-height: min(70dvh, 600px); overflow-y:auto; }
.mp-chat-menu__label { white-space:normal; overflow:visible; }
.mp-muc-close { border:0; background:transparent; color:var(--mp-blue); font:inherit; padding:8px 0; cursor:pointer; }
.mp-muc-backdrop .mp-sheet__title { min-width:0; overflow-wrap:anywhere; text-align:center; }

.mp-startup-error { position:fixed; z-index:6000; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; background:var(--mp-surface); color:var(--mp-text); }
.mp-startup-error button { border:0; border-radius:20px; padding:10px 20px; background:var(--mp-blue); color:white; font:inherit; }
.mp-startup-shell { position:fixed; inset:0; z-index:5100; background:var(--mp-background, var(--mp-surface)); color:var(--mp-text); overflow:auto; padding-top:env(safe-area-inset-top,0px); }
.mp-startup-shell .mp-nav-header { display:flex; flex-direction:column; align-items:flex-start; }
.mp-startup-status { color:var(--mp-text-secondary); font-size:13px; margin:0 16px 8px; }
.mp-startup-note { margin:12px 16px; color:var(--mp-text-secondary); font-size:14px; }
.mp-startup-list { margin:12px 0; }
.mp-startup-chat { display:flex; flex-direction:column; gap:4px; width:100%; text-align:left; padding:14px 16px; border:0; border-bottom:1px solid var(--mp-separator); color:var(--mp-text); background:var(--mp-surface); font:inherit; }
.mp-startup-chat small { color:var(--mp-text-secondary); }
.mp-startup-retry { margin:12px 16px; padding:9px 16px; color:#fff; background:var(--mp-blue); border:0; border-radius:20px; font:inherit; }
.mp-startup-detail { padding:0 16px 24px; color:var(--mp-text); }
.mp-startup-detail h2 { font-size:18px; }
.mp-startup-history { max-height:45dvh; overflow:auto; }
.mp-startup-message { background:var(--mp-surface); border-radius:12px; padding:10px; white-space:pre-wrap; overflow-wrap:anywhere; }
.mp-startup-detail label { display:block; color:var(--mp-text-secondary); font-size:13px; }
.mp-startup-draft { display:block; box-sizing:border-box; width:100%; min-height:80px; margin-top:8px; border:1px solid var(--mp-separator); border-radius:12px; padding:10px; color:var(--mp-text); background:var(--mp-surface); font:inherit; }
.mp-live-status { display:block; margin:0; }
.mp-startup-draft-warning { position:fixed; z-index:6100; bottom:16px; left:16px; right:16px; padding:16px; border:1px solid var(--mp-separator); border-radius:16px; background:var(--mp-surface); color:var(--mp-text); box-shadow:var(--mp-sheet-shadow); }
/* El mismo patrón de navegación iOS, disponible durante la restauración de sesión. */
.mp-startup-shell { display:flex; flex-direction:column; overflow:hidden; }
.mp-startup-content { flex:1 1 auto; overflow-y:auto; min-height:0; }
body[data-mapache-auth="unauthenticated"] .mp-startup-shell .mp-startup-nav { display:grid !important; position:relative; flex-shrink:0; }
.mp-startup-chat { flex-direction:row; align-items:center; gap:12px; }
.mp-startup-chat .mp-chat-row__body { display:flex; flex-direction:column; gap:4px; }
.mp-startup-avatar { width:50px; height:50px; border-radius:50%; background:var(--mp-muc-avatar-bg); color:white; display:flex; align-items:center; justify-content:center; font-weight:600; flex-shrink:0; }
.mp-startup-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* Invitaciones MUC: el cuerpo se desplaza y el botón permanece fuera del scroll. */
.mp-muc-invite-backdrop { align-items:flex-end; }
.mp-muc-invite-sheet { height:min(92dvh, 100%); max-height:100%; }
.mp-muc-invite-sheet .mp-muc-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:16px; }
.mp-muc-invite-contacts { max-height:none; overflow:visible; }
.mp-muc-invite-results { color:var(--mp-text-secondary); font-size:14px; overflow-wrap:anywhere; }
.mp-muc-invite-footer { flex:0 0 auto; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top:0.5px solid var(--mp-separator); background:var(--mp-surface); }
.mp-muc-invite-submit { width:100%; min-height:46px; border:0; border-radius:12px; background:var(--mp-blue); color:#fff; font:600 16px var(--mp-font); cursor:pointer; }
.mp-muc-invite-submit:disabled { opacity:.42; cursor:default; }

/* Aviso de conexión no modal; no sustituye ni desplaza el chat. */
.mp-connection-banner { position: fixed; z-index: 6000; top: calc(env(safe-area-inset-top, 0px) + 5px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 5px 10px; border: 1px solid var(--mp-separator); border-radius: 16px; background: var(--mp-surface); color: var(--mp-text); box-shadow: 0 2px 8px #0002; font-size: 12px; }
.mp-connection-banner button { border: 0; background: transparent; color: #007aff; font: inherit; font-weight: 600; cursor: pointer; }
.mp-connection-banner button[hidden] { display: none; }

/* Estado de conexión junto al título, sin desplazar la navegación. */
.mp-nav-header, .mp-startup-shell .mp-nav-header { display:flex; flex-direction:row; align-items:center; gap:10px; }
.mp-connection-dot { display:inline-block; flex:0 0 11px; width:11px; height:11px; border:2px solid rgba(0,122,255,.25); border-top-color:#007aff; border-radius:50%; animation:mp-connection-spin .8s linear infinite; }
.mp-connection-dot[hidden] { display:none; }
@keyframes mp-connection-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mp-connection-dot { animation:none; border-color:#007aff; } }
.mp-startup-shell { padding-top:0; }
body[data-mapache-auth="unauthenticated"] .mp-startup-shell .mp-nav-header { display:flex !important; }
body[data-mapache-auth="unauthenticated"] .mp-startup-shell .mp-tabbar { display:grid !important; }
body[data-mapache-auth="unauthenticated"] .mp-startup-shell .mp-chats-pane { display:flex !important; }
.mp-startup-alert { flex-shrink:0; display:flex; justify-content:center; align-items:center; gap:8px; padding:5px 12px; color:var(--mp-text-secondary); font-size:12px; }
.mp-startup-alert[hidden] { display:none; }
.mp-startup-alert button { border:0; background:transparent; color:var(--mp-blue); font:inherit; font-weight:600; }
.mp-startup-alert button[hidden] { display:none; }
.mp-startup-hint { margin:16px; color:var(--mp-text-secondary); font-size:14px; }