/* ═══════════════════════════════════════════════════════════════════════════
   Maliba — Frontend Refonte v5.0 (Shell Unifié Responsive)
   ─────────────────────────────────────────────────────────────────────────────
   Objectif : corriger les écrans en double, les icônes cassées et les
   problèmes responsive/PWA identifiés en production.

   PROBLÈMES CORRIGÉS :
   1. Écrans en double sur mobile (sidebar + topbar + FAB + mobile-nav)
      → Navigation UNIFIÉE : 1 sidebar desktop, 1 drawer mobile unique.
   2. Icônes cassées (IDs SVG dupliqués, couleurs manquantes)
      → Système d'icônes cohérent avec fallbacks.
   3. Responsive cassé (Tailwind CDN FOUC, breakpoints décalés)
      → Breakpoints CSS natifs cohérents (768px, 1024px, 1280px).

   STRATÉGIE : Cette couche surcharge style.css ET style-v4.css avec des
   règles !important ciblées pour corriger les conflits sans toucher au
   code existant. Toutes les classes .maliba-* sont préservées.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. BREAKPOINTS COHÉRENTS (mobile-first) ──────────────────────────── */
/*
   - Mobile  : < 768px     → drawer mobile, pas de sidebar, pas de topbar
   - Tablette: 768-1023px  → drawer mobile, topbar simplifiée
   - Desktop : ≥ 1024px    → sidebar fixe, topbar complète, pas de FAB
   - Large   : ≥ 1280px    → sidebar élargie
*/

/* ─── 2. SHELL LAYOUT UNIFIÉ ────────────────────────────────────────────── */
.maliba-shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
  position: relative;
  background: var(--bg-base, #050810);
}

/* ─── 3. SIDEBAR : desktop uniquement, drawer sur mobile ───────────────── */
.maliba-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--bg-glass-strong, rgba(10, 14, 26, 0.88));
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  display: flex;
  flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  position: relative;
  contain: layout style;
}

/* Desktop ≥ 1024px : sidebar fixe visible */
@media (min-width: 1024px) {
  .maliba-sidebar {
    position: relative;
    transform: translateX(0);
  }
  .maliba-sidebar.collapsed {
    width: 0;
    border-right: none;
    overflow: hidden;
  }
}

/* Mobile/Tablette < 1024px : sidebar en drawer off-canvas */
@media (max-width: 1023px) {
  .maliba-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
    z-index: 60;
  }
  .maliba-sidebar.open {
    transform: translateX(0);
  }
}

/* ─── 4. OVERLAY SIDEBAR (mobile) ──────────────────────────────────────── */
#sidebar-overlay,
.maliba-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0,0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 55;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
}
#sidebar-overlay.open,
.maliba-sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}
/* Cacher l'overlay sur desktop */
@media (min-width: 1024px) {
  #sidebar-overlay,
  .maliba-sidebar-overlay {
    display: none !important;
  }
}

/* ─── 5. TOPBAR : desktop uniquement ───────────────────────────────────── */
.maliba-topbar {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--bg-glass, rgba(15, 20, 36, 0.72));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  gap: 1rem;
  z-index: 20;
  position: relative;
}

/* Cacher la topbar sur mobile — le chat-header a son propre header */
@media (max-width: 1023px) {
  .maliba-topbar {
    display: none !important;
  }
}

/* Sur tablette 768-1023px, afficher une topbar mobile simplifiée */
@media (min-width: 768px) and (max-width: 1023px) {
  .maliba-topbar {
    display: flex !important;
    height: 56px;
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
  .maliba-topbar .maliba-pill,
  .maliba-topbar-center {
    display: none !important;
  }
}

/* ─── 6. FAB MOBILE : supprimé (remplacé par hamburger unifié) ──────────── */
/* Le FAB mobile est supprimé car redondant avec le hamburger du chat-header
   et de la topbar. Sur mobile, le hamburger du chat-header ouvre le drawer. */
.maliba-fab-menu {
  display: none !important;
}

/* ─── 7. MOBILE-NAV DRAWER : supprimé (unifié avec sidebar) ────────────── */
/* L'ancien mobile-nav était un drawer bottom redondant avec la sidebar.
   Désormais, sur mobile, la sidebar elle-même devient le drawer. */
.maliba-mobile-nav,
.maliba-mobile-nav-overlay {
  display: none !important;
}

/* ─── 8. PAGE CONTENT ──────────────────────────────────────────────────── */
.maliba-page {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1rem, 0.7rem + 1.5vw, 1.5rem);
  display: flex;
  flex-direction: column;
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

@media (max-width: 768px) {
  .maliba-page {
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

@media (max-width: 380px) {
  .maliba-page {
    padding: 0.75rem;
  }
}

/* ─── 9. CHAT HEADER : mobile unifié ───────────────────────────────────── */
.maliba-chat-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  background: var(--bg-glass, rgba(15, 20, 36, 0.72));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  flex-shrink: 0;
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 15;
}

/* Sur mobile, ajouter le safe-area top pour le notch iOS */
@media (max-width: 1023px) {
  .maliba-chat-header {
    padding-top: max(0.75rem, env(safe-area-inset-top));
    min-height: calc(56px + env(safe-area-inset-top));
  }
}

/* Le hamburger du chat-header est TOUJOURS visible sur mobile */
.maliba-chat-header-hamburger {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #B4BCD0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.maliba-chat-header-hamburger:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #F5F7FA);
}

/* Desktop : cacher le hamburger du chat-header (la sidebar est déjà visible) */
@media (min-width: 1024px) {
  .maliba-chat-header-hamburger {
    display: none !important;
  }
}

/* ─── 10. ICÔNES : cohérence et fallbacks ──────────────────────────────── */

/* Toutes les icônes FontAwesome doivent avoir une taille cohérente */
.maliba-nav-item i.fas,
.maliba-nav-item i.far,
.maliba-nav-item i.fab {
  width: 18px;
  text-align: center;
  font-size: 0.95rem;
  flex-shrink: 0;
  color: inherit;
}

/* Icônes SVG (moduleIcon) : couleur hérite du parent */
.maliba-app-icon svg,
.maliba-nav-item svg {
  color: inherit;
  display: block;
  width: 100%;
  height: 100%;
}

/* Si une icône FontAwesome ne se charge pas (CDN lent), afficher un fallback */
.maliba-nav-item i.fas:empty::before,
.maliba-icon-btn i.fas:empty::before {
  content: '◆';
  font-family: serif;
  color: var(--maliba-cyan, #00E5FF);
}

/* ─── 11. LOGO SVG : IDs uniques pour éviter les gradients cassés ──────── */
.maliba-brand-mark svg,
.maliba-auth-logo svg,
.maliba-install-prompt-logo svg,
.maliba-u-logo-box svg,
.maliba-pair-logo svg,
.maliba-msg-avatar-ai svg,
.maliba-empty-state-logo svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── 12. APP ICONS (mobile nav tiles) : cohérence visuelle ────────────── */
.maliba-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4);
}

.maliba-app-icon svg {
  width: 22px;
  height: 22px;
}

.maliba-app-icon-chat {
  background: linear-gradient(135deg, #00E5FF 0%, #0091EA 100%);
}
.maliba-app-icon-assistants {
  background: linear-gradient(135deg, #8B5CF6 0%, #6D28D9 100%);
}
.maliba-app-icon-models {
  background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
}
.maliba-app-icon-files {
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
}

/* ─── 13. NAV ITEM : styles unifiés ────────────────────────────────────── */
.maliba-nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #B4BCD0);
  cursor: pointer;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.maliba-nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #F5F7FA);
  transform: translateX(2px);
}

.maliba-nav-item:active {
  transform: translateX(0) scale(0.98);
}

.maliba-nav-item.active {
  background: rgba(0, 229, 255, 0.08);
  color: var(--maliba-cyan, #00E5FF);
  font-weight: 600;
}

.maliba-nav-item.active::before {
  content: '';
  position: absolute;
  left: -3px;
  top: 25%;
  bottom: 25%;
  width: 3px;
  background: linear-gradient(180deg, #00E5FF, #0091EA);
  border-radius: 9999px;
  box-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
}

/* ─── 14. NAV SECTION LABEL ────────────────────────────────────────────── */
.maliba-nav-section {
  padding: 1rem 0.75rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-quaternary, #4A536B);
}

/* ─── 15. SIDEBAR FOOTER : user chip ───────────────────────────────────── */
.maliba-sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}

.maliba-user-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 10px;
  background: rgba(15, 20, 36, 0.5);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  cursor: pointer;
  transition: all 0.15s ease-out;
}

.maliba-user-chip:hover {
  background: rgba(22, 27, 46, 0.8);
  border-color: var(--border-soft, rgba(255, 255, 255, 0.09));
  transform: translateY(-1px);
}

/* ─── 16. AVATAR ───────────────────────────────────────────────────────── */
.maliba-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00E5FF 0%, #0091EA 100%);
  color: #001016;
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px rgba(0, 229, 255, 0.3);
  text-transform: uppercase;
}

.maliba-avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; border-radius: 8px; }
.maliba-avatar-lg { width: 56px; height: 56px; font-size: 1.25rem; border-radius: 16px; }

/* ─── 17. ICON BUTTON ──────────────────────────────────────────────────── */
.maliba-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #B4BCD0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  transition: all 0.15s ease-out;
  flex-shrink: 0;
}

.maliba-icon-btn:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #F5F7FA);
  border-color: var(--border-subtle, rgba(255, 255, 255, 0.06));
}

.maliba-icon-btn:active {
  transform: scale(0.94);
}

/* Tap target 44x44 sur mobile */
@media (max-width: 768px) {
  .maliba-icon-btn,
  .maliba-chat-header-action,
  .maliba-chat-header-hamburger,
  .maliba-composer-tool-btn {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ─── 18. PILLS ────────────────────────────────────────────────────────── */
.maliba-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  background: rgba(15, 20, 36, 0.5);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  color: var(--text-secondary, #B4BCD0);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease-out;
}

.maliba-pill:hover {
  background: rgba(22, 27, 46, 0.8);
  color: var(--text-primary, #F5F7FA);
}

.maliba-pill.active {
  background: rgba(0, 229, 255, 0.08);
  color: var(--maliba-cyan, #00E5FF);
  border-color: rgba(0, 229, 255, 0.25);
}

/* ─── 19. CHAT MESSAGES ────────────────────────────────────────────────── */
.maliba-chat-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  scroll-behavior: smooth;
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

@media (max-width: 768px) {
  .maliba-chat-messages {
    padding: 1rem 0.75rem;
  }
}

/* ─── 20. CHAT COMPOSER ────────────────────────────────────────────────── */
.maliba-composer-wrap,
.maliba-composer-2026 {
  padding: 0.75rem;
  background: var(--bg-glass, rgba(15, 20, 36, 0.72));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}

.maliba-chat-composer {
  width: 100%;
  background: rgba(10, 14, 26, 0.8);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  padding: 0.75rem 1rem;
  color: var(--text-primary, #F5F7FA);
  font-size: 1rem;
  font-family: inherit;
  resize: none;
  min-height: 48px;
  max-height: 200px;
  line-height: 1.5;
  transition: all 0.15s ease-out;
}

.maliba-chat-composer::placeholder {
  color: var(--text-quaternary, #4A536B);
}

.maliba-chat-composer:focus,
.maliba-chat-composer:focus-visible {
  outline: none;
  border-color: var(--maliba-cyan, #00E5FF);
  background: rgba(15, 20, 36, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}

/* ─── 21. RESPONSIVE TABLETTE (768-1023px) ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {
  .maliba-page {
    padding: 1.25rem;
  }
  .maliba-chat-messages {
    padding: 1.25rem 1rem;
  }
}

/* ─── 22. RESPONSIVE LARGE DESKTOP (≥1280px) ───────────────────────────── */
@media (min-width: 1280px) {
  .maliba-sidebar {
    width: 280px;
  }
  .maliba-page {
    padding: 2rem;
  }
  .maliba-chat-messages {
    padding: 2rem 1.5rem;
  }
}

@media (min-width: 1536px) {
  .maliba-page,
  .maliba-chat-messages {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
}

/* ─── 23. RESPONSIVE PETITS TÉLÉPHONES (<380px) ────────────────────────── */
@media (max-width: 380px) {
  .maliba-sidebar {
    width: 100vw;
    max-width: 100vw;
  }
  .maliba-chat-header-title {
    font-size: 0.875rem;
  }
  .maliba-chat-header-agent-pill {
    font-size: 0.65rem;
    padding: 2px 6px;
  }
  .maliba-app-icon {
    width: 36px;
    height: 36px;
  }
  .maliba-app-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ─── 24. PWA STANDALONE MODE ──────────────────────────────────────────── */
.pwa-standalone body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  user-select: none;
  -webkit-user-select: none;
}

.pwa-standalone input,
.pwa-standalone textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* En mode standalone PWA, ajouter du padding top pour le safe-area */
.pwa-standalone .maliba-chat-header,
.pwa-standalone .maliba-topbar {
  padding-top: max(0.75rem, env(safe-area-inset-top));
}

/* ─── 25. ANTI-FOUC (Flash of Unstyled Content) ────────────────────────── */
/* Cacher le contenu pendant que Tailwind CDN se charge */
html.js-loading #app > *:not(#splash-screen) {
  visibility: hidden;
}

html.js-ready #app > *:not(#splash-screen) {
  visibility: visible;
}

/* ─── 26. SCROLLBAR PREMIUM ────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 229, 255, 0.3);
  background-clip: padding-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

/* ─── 27. FOCUS VISIBLE (accessibilité) ───────────────────────────────── */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--maliba-cyan, #00E5FF);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ─── 28. TOAST CONTAINER ──────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
}

#toast-container > * { pointer-events: auto; }

@media (max-width: 480px) {
  #toast-container {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}

/* ─── 29. MODAL ────────────────────────────────────────────────────────── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.2s ease-out;
}

#modal-overlay.open {
  display: flex;
}

#modal-content {
  background: rgba(10, 14, 26, 0.95);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 20px;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }

/* ─── 30. UPDATE BANNER ────────────────────────────────────────────────── */
.maliba-update-banner {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 16px;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  z-index: 100;
  max-width: calc(100vw - 2rem);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.maliba-update-banner-visible {
  transform: translateX(-50%) translateY(0);
}

/* ─── 31. INSTALL PROMPT ───────────────────────────────────────────────── */
.maliba-install-prompt {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  z-index: 100;
  transform: translateY(120%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: calc(100vw - 2rem);
}

.maliba-install-visible {
  transform: translateY(0);
}

@media (max-width: 480px) {
  .maliba-install-prompt {
    left: 1rem;
    right: 1rem;
  }
}

/* ─── 32. SPLASH SCREEN ────────────────────────────────────────────────── */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #050810;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

#splash-screen.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ─── 33. REDUCED MOTION ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── 34. HIGH CONTRAST ────────────────────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --border-subtle: rgba(255, 255, 255, 0.2);
    --border-soft: rgba(255, 255, 255, 0.3);
    --border-strong: rgba(255, 255, 255, 0.5);
  }
}

/* ─── 35. HOVER NONE (tactile) ─────────────────────────────────────────── */
@media (hover: none) {
  .maliba-nav-item:hover,
  .maliba-card-hover:hover,
  .maliba-u-card:hover {
    transform: none;
  }
}

/* ─── 36. PRINT ────────────────────────────────────────────────────────── */
@media print {
  .maliba-sidebar,
  .maliba-topbar,
  .maliba-fab-menu,
  .maliba-mobile-nav,
  .maliba-mobile-nav-overlay,
  #toast-container,
  #modal-overlay,
  .maliba-update-banner,
  .maliba-install-prompt {
    display: none !important;
  }
  .maliba-shell {
    display: block;
    height: auto;
  }
  .maliba-main {
    overflow: visible;
  }
  .maliba-page {
    overflow: visible;
    padding: 0;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ─── 37. CLASSES UTILITAIRES (remplacement Tailwind) ──────────────────── */
/* Ces classes remplacent les classes Tailwind utilisées dans app.js pour
   éviter la dépendance au CDN Tailwind (qui cause du FOUC). */

.maliba-w-full { width: 100%; }
.maliba-mx-auto { margin-left: auto; margin-right: auto; }
.maliba-mt-2 { margin-top: 0.5rem; }
.maliba-p-12 { padding: 3rem; }
.maliba-py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.maliba-max-w-2xl { max-width: 42rem; }
.maliba-flex-center { display: flex; align-items: center; justify-content: center; }
.maliba-flex-between { display: flex; align-items: center; justify-content: space-between; }
.maliba-flex-start { display: flex; align-items: center; justify-content: flex-start; }
.maliba-flex-gap-2 { display: flex; gap: 0.5rem; }
.maliba-hidden-mobile { display: initial; }

@media (max-width: 768px) {
  .maliba-hidden-mobile { display: none !important; }
}

.maliba-text-primary { color: var(--text-primary, #F5F7FA); }
.maliba-text-secondary { color: var(--text-secondary, #B4BCD0); }
.maliba-text-tertiary { color: var(--text-tertiary, #6E7A95); }
.maliba-text-quaternary { color: var(--text-quaternary, #4A536B); }
.maliba-text-sm { font-size: 0.875rem; }
.maliba-text-xs { font-size: 0.75rem; }
.maliba-text-2xl { font-size: 1.75rem; }
.maliba-font-medium { font-weight: 500; }
.maliba-font-semibold { font-weight: 600; }
.maliba-font-bold { font-weight: 700; }
.maliba-font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.maliba-cyan { color: var(--maliba-cyan, #00E5FF); }
.maliba-blue { color: var(--maliba-blue, #0091EA); }
.maliba-success { color: var(--success, #22D39A); }

.maliba-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (max-width: 640px) {
  .maliba-grid-2 { grid-template-columns: 1fr; }
}

.maliba-space-y > * + * { margin-top: 0.75rem; }

.maliba-spin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.maliba-spin i {
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ─── 38. CLASSES TAILWIND CRITIQUES (pour compatibilité) ──────────────── */
/* On redéfinit les classes Tailwind utilisées dans app.js pour qu'elles
   fonctionnent SANS le CDN Tailwind. Le CDN reste chargé pour les classes
   non critiques, mais ces classes essentielles sont en CSS natif. */

.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.hidden { display: none; }
.w-full { width: 100%; }
.mt-2 { margin-top: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-6 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.text-center { text-align: center; }
.gap-2 { gap: 0.5rem; }
.cursor-pointer { cursor: pointer; }
.relative { position: relative; }
.absolute { position: absolute; }

/* Responsive helpers (remplacent lg:, md:, sm:) */
@media (min-width: 768px) {
  .md\:inline-flex { display: inline-flex; }
  .md\:block { display: block; }
  .md\:flex { display: flex; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:flex { display: flex; }
  .lg\:block { display: block; }
}

@media (max-width: 1023px) {
  .lg\:hidden { display: initial; }
}

/* ─── 38b. CLASSES RESPONSIVE CUSTOM (v3.10.2) ─────────────────────────── */
/* Ces classes remplacent les utilitaires Tailwind lg:/md: par des équivalents
   CSS natifs avec des noms explicites. Elles fonctionnent SANS le CDN Tailwind. */

/* maliba-mobile-only : visible uniquement sur mobile (<1024px) */
.maliba-mobile-only {
  display: none !important;
}
@media (max-width: 1023px) {
  .maliba-mobile-only {
    display: flex !important;
  }
}

/* maliba-desktop-only : visible uniquement sur desktop (≥1024px) */
.maliba-desktop-only {
  display: flex !important;
}
@media (max-width: 1023px) {
  .maliba-desktop-only {
    display: none !important;
  }
}

/* maliba-tablet-up : visible sur tablette et desktop (≥768px) */
.maliba-tablet-up {
  display: none !important;
}
@media (min-width: 768px) {
  .maliba-tablet-up {
    display: inline-flex !important;
  }
}
.maliba-topbar-center.maliba-tablet-up {
  display: none !important;
}
@media (min-width: 768px) {
  .maliba-topbar-center.maliba-tablet-up {
    display: flex !important;
    flex: 1;
    justify-content: center;
    min-width: 0;
  }
}

/* maliba-mobile-sidebar-close : bouton de fermeture de la sidebar (mobile uniquement) */
.maliba-mobile-sidebar-close {
  display: none;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-secondary, #B4BCD0);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.maliba-mobile-sidebar-close:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #F5F7FA);
}
@media (max-width: 1023px) {
  .maliba-mobile-sidebar-close {
    display: flex;
  }
}

/* Sidebar brand : position relative pour le bouton close absolu */
.maliba-sidebar-brand {
  position: relative;
  padding: 1.25rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}

/* ─── 39. BRAND MARK ───────────────────────────────────────────────────── */
.maliba-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  background: linear-gradient(135deg, #000 0%, #0A0E1A 100%);
  border: 1px solid rgba(0, 229, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(0, 229, 255, 0.45), inset 0 0 12px rgba(0, 229, 255, 0.08);
  flex-shrink: 0;
  position: relative;
}

.maliba-brand-text h1 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #F5F7FA);
  margin: 0;
  letter-spacing: -0.02em;
}

.maliba-brand-text p {
  font-size: 0.7rem;
  color: var(--maliba-cyan, #00E5FF);
  margin: 0;
  font-weight: 500;
}

/* ─── 40. BADGES ───────────────────────────────────────────────────────── */
.maliba-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 2px 0.5rem;
  background: rgba(22, 27, 46, 0.8);
  color: var(--text-secondary, #B4BCD0);
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 9999px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.maliba-badge-brand {
  background: rgba(0, 229, 255, 0.12);
  color: var(--maliba-cyan, #00E5FF);
  border: 1px solid rgba(0, 229, 255, 0.25);
}

.maliba-badge-success {
  background: rgba(34, 211, 154, 0.12);
  color: var(--success, #22D39A);
}

.maliba-badge-warning {
  background: rgba(255, 181, 71, 0.12);
  color: var(--warning, #FFB547);
}

.maliba-badge-danger {
  background: rgba(255, 92, 124, 0.12);
  color: var(--danger, #FF5C7C);
}

/* ─── 41. BUTTONS ──────────────────────────────────────────────────────── */
.maliba-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  position: relative;
  overflow: hidden;
  min-height: 40px;
  transition: all 0.15s ease-out;
}

.maliba-btn-primary {
  background: linear-gradient(135deg, #00E5FF 0%, #0091EA 100%);
  color: #001016;
  box-shadow: 0 12px 32px -8px rgba(0, 229, 255, 0.35);
}

.maliba-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -8px rgba(0, 229, 255, 0.5);
  filter: brightness(1.05);
}

.maliba-btn-primary:active {
  transform: translateY(0);
}

.maliba-btn-secondary {
  background: rgba(15, 20, 36, 0.8);
  color: var(--text-primary, #F5F7FA);
  border-color: var(--border-soft, rgba(255, 255, 255, 0.09));
}

.maliba-btn-ghost {
  background: transparent;
  color: var(--text-secondary, #B4BCD0);
}

.maliba-btn-ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary, #F5F7FA);
}

.maliba-btn-danger {
  background: rgba(255, 92, 124, 0.12);
  color: var(--danger, #FF5C7C);
  border-color: rgba(255, 92, 124, 0.25);
}

.maliba-btn-sm {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  min-height: 32px;
}

.maliba-btn-lg {
  padding: 1rem 1.5rem;
  font-size: 1rem;
  min-height: 48px;
}

/* ─── 42. INPUTS ───────────────────────────────────────────────────────── */
.maliba-input {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(10, 14, 26, 0.8);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  color: var(--text-primary, #F5F7FA);
  font-size: 1rem;
  font-family: inherit;
  transition: all 0.15s ease-out;
}

.maliba-input::placeholder {
  color: var(--text-quaternary, #4A536B);
}

.maliba-input:focus,
.maliba-input:focus-visible {
  outline: none;
  border-color: var(--maliba-cyan, #00E5FF);
  background: rgba(15, 20, 36, 0.9);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.12);
}

/* ─── 43. SAFE AREA (iOS notch + Android nav bar) ──────────────────────── */
:root {
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
}

/* ─── 44. DYNAMIC VIEWPORT (100dvh pour mobile) ────────────────────────── */
.maliba-shell,
#app {
  height: 100vh;
  height: 100dvh;
}

@supports (height: 100dvh) {
  .maliba-shell,
  #app {
    height: 100dvh;
  }
}

/* ─── 45. CONTAINMENT (performance) ────────────────────────────────────── */
.maliba-chat-messages,
.maliba-logs-list,
.maliba-files-list,
.maliba-commands-list,
.maliba-search-result {
  contain: layout style;
}

/* ─── 46. NOTIF DOT ────────────────────────────────────────────────────── */
.maliba-icon-btn .notif-dot,
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--danger, #FF5C7C);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-base, #050810);
  box-shadow: 0 0 0 2px rgba(255, 92, 124, 0.12);
}

/* ─── 47. EMPTY STATE ──────────────────────────────────────────────────── */
.maliba-empty-state,
.maliba-empty-state-2026 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  gap: 1rem;
  max-width: 480px;
  margin: 0 auto;
}

.maliba-empty-state-logo,
.maliba-empty-logo-ring {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0, 229, 255, 0.12), rgba(0, 145, 234, 0.08));
  border: 1px solid rgba(0, 229, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
}

.maliba-empty-state-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary, #F5F7FA);
  margin: 0;
  letter-spacing: -0.02em;
}

.maliba-empty-state-sub {
  font-size: 0.875rem;
  color: var(--text-tertiary, #6E7A95);
  margin: 0;
  line-height: 1.6;
}

/* ─── 48. PAGE HEADER ──────────────────────────────────────────────────── */
.maliba-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.maliba-page-title {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 1.75rem);
  font-weight: 700;
  color: var(--text-primary, #F5F7FA);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.2;
}

.maliba-page-subtitle {
  font-size: 0.875rem;
  color: var(--text-tertiary, #6E7A95);
  margin: 0.25rem 0 0;
}

/* Mobile page header (hamburger + title) */
.maliba-mobile-page-header {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
}

@media (max-width: 1023px) {
  .maliba-mobile-page-header {
    display: flex;
  }
}

/* ─── 49. CARDS ────────────────────────────────────────────────────────── */
.maliba-card {
  background: rgba(10, 14, 26, 0.5);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  border-radius: 16px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
}

/* ─── 50. CHAT HEADER TITLE ────────────────────────────────────────────── */
.maliba-chat-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #F5F7FA);
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.maliba-chat-header-subtitle {
  font-size: 0.75rem;
  color: var(--text-tertiary, #6E7A95);
  margin: 0;
}

.maliba-chat-header-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(0, 229, 255, 0.12);
  border: 1px solid rgba(0, 229, 255, 0.25);
  border-radius: 9999px;
  color: var(--maliba-cyan, #00E5FF);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ─── 51. SEND BUTTON ──────────────────────────────────────────────────── */
.maliba-send-btn-2026 {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #00E5FF 0%, #0091EA 100%);
  border: none;
  color: #001016;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 32px -8px rgba(0, 229, 255, 0.35);
  flex-shrink: 0;
}

.maliba-send-btn-2026:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -8px rgba(0, 229, 255, 0.5);
}

.maliba-send-btn-2026:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ─── 52. COMPOSER TOOL BUTTON ─────────────────────────────────────────── */
.maliba-composer-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(15, 20, 36, 0.5);
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  color: var(--text-secondary, #B4BCD0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.15s ease-out;
}

.maliba-composer-tool-btn:hover {
  background: rgba(22, 27, 46, 0.8);
  color: var(--text-primary, #F5F7FA);
}

@media (max-width: 768px) {
  .maliba-composer-tool-btn {
    width: 44px;
    height: 44px;
  }
}

/* ─── 53. SCROLL BUTTON ────────────────────────────────────────────────── */
.maliba-scroll-btn {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  background: rgba(22, 27, 46, 0.9);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  color: var(--text-secondary, #B4BCD0);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
  margin-bottom: 0.5rem;
  z-index: 10;
}

/* ═══════════════════════════════════════════════════════════════════════════
   END — Maliba Frontend Refonte v5.0
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 53. AUTH FORM v3.10.3 — Validation temps réel + profil enrichi ──── */

/* Row pour afficher prénom + nom côte à côte sur desktop */
.maliba-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

@media (max-width: 480px) {
  .maliba-auth-row {
    grid-template-columns: 1fr;
  }
}

/* Message d'erreur sous chaque champ */
.maliba-auth-field-error {
  display: none;
  color: var(--danger, #FF5C7C);
  font-size: 0.75rem;
  margin-top: 0.25rem;
  font-weight: 500;
  min-height: 1rem;
  line-height: 1.3;
}

/* États visuels des inputs (erreur / valide) */
.maliba-input.maliba-input-error {
  border-color: var(--danger, #FF5C7C) !important;
  background: rgba(255, 92, 124, 0.05) !important;
}

.maliba-input.maliba-input-error:focus {
  box-shadow: 0 0 0 3px rgba(255, 92, 124, 0.15) !important;
}

.maliba-input.maliba-input-valid {
  border-color: var(--success, #22D39A) !important;
}

.maliba-input.maliba-input-valid:focus {
  box-shadow: 0 0 0 3px rgba(34, 211, 154, 0.15) !important;
}

/* Indicateur de force du mot de passe */
.maliba-password-strength {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.maliba-password-strength-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 9999px;
  overflow: hidden;
}

.maliba-password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  transition: width 0.3s ease-out, background 0.3s ease-out;
}

.maliba-password-strength-fill.strength-1 {
  width: 20%;
  background: var(--danger, #FF5C7C);
}
.maliba-password-strength-fill.strength-2 {
  width: 40%;
  background: #FF8A4C;
}
.maliba-password-strength-fill.strength-3 {
  width: 60%;
  background: var(--warning, #FFB547);
}
.maliba-password-strength-fill.strength-4 {
  width: 80%;
  background: #84CC16;
}
.maliba-password-strength-fill.strength-5 {
  width: 100%;
  background: var(--success, #22D39A);
}

.maliba-password-strength-label {
  font-size: 0.7rem;
  color: var(--text-tertiary, #6E7A95);
  font-weight: 500;
  min-height: 1rem;
}

.maliba-password-strength-label.strength-1 { color: var(--danger, #FF5C7C); }
.maliba-password-strength-label.strength-2 { color: #FF8A4C; }
.maliba-password-strength-label.strength-3 { color: var(--warning, #FFB547); }
.maliba-password-strength-label.strength-4 { color: #84CC16; }
.maliba-password-strength-label.strength-5 { color: var(--success, #22D39A); }

/* ─── 54. AUTH CARD — layout amélioré pour formulaire long ──────────────── */
.maliba-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 460px;
  background: rgba(10, 14, 26, 0.95);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--border-soft, rgba(255, 255, 255, 0.09));
  border-radius: 20px;
  padding: 2rem;
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.7);
  animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}

@media (max-width: 480px) {
  .maliba-auth-card {
    padding: 1.5rem 1.25rem;
    margin: 0 0.5rem;
    max-width: none;
  }
}

.maliba-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.maliba-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.maliba-auth-field label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary, #B4BCD0);
  letter-spacing: 0.01em;
}

.maliba-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(15, 20, 36, 0.6);
  border-radius: 12px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.06));
  margin-bottom: 0.5rem;
}

.maliba-auth-tab {
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-secondary, #B4BCD0);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  transition: all 0.15s ease-out;
}

.maliba-auth-tab:hover {
  color: var(--text-primary, #F5F7FA);
}

.maliba-auth-tab.active {
  background: rgba(22, 27, 46, 0.9);
  color: var(--maliba-cyan, #00E5FF);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.3);
}

.maliba-auth-perks {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 0.75rem;
  background: rgba(0, 229, 255, 0.04);
  border: 1px solid rgba(0, 229, 255, 0.12);
  border-radius: 12px;
}

.maliba-auth-perk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary, #B4BCD0);
}

.maliba-auth-submit {
  margin-top: 0.5rem;
}

/* ─── 55. CHAT ALLÉGÉ — UX fluide et professionnelle ───────────────────── */
/* Réduire la densité visuelle du chat pour une expérience plus pro */

.maliba-chat-messages {
  gap: 0.875rem !important;
}

.maliba-msg {
  gap: 0.625rem !important;
}

.maliba-msg-bubble {
  padding: 0.75rem 1rem !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  max-width: min(680px, 85%) !important;
}

@media (max-width: 768px) {
  .maliba-chat-messages {
    padding: 1rem 0.75rem !important;
    gap: 0.75rem !important;
  }
  .maliba-msg-bubble {
    max-width: 90% !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.875rem !important;
  }
  .maliba-msg-avatar,
  .maliba-msg-avatar-ai {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
  }
}

/* ─── 56. USER CHIP — afficher display_name au lieu de username ─────────── */
.maliba-user-chip-text p:first-child {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #F5F7FA) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}