/* ================================================================================
   N.O.G CHATBOT - FEUILLE DE STYLE PRINCIPALE REFACTORÉE
   ================================================================================

   STRUCTURE :
   1. Variables CSS & Thème
   2. Reset & Base
   3. Typographie
   4. Layout Principal
   5. Composants UI
   6. Animations
   7. Responsive

   ================================================================================ */

/* ========================================
   1. VARIABLES CSS & THÈME
   ======================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  /* === PALETTE DE COULEURS === */
  /* Couleurs primaires */
  --color-ivory: #ffffff;
  --color-cream: #f3f4e5;
  --color-charcoal: #2f2f2e;
  --color-gold: #f9e479;
  --color-gold-dark: #C78A1E;

  /* Niveaux de gris */
  --gray-50: #f7f7f7;
  --gray-100: #f1f1f1;
  --gray-200: #e5e5e5;
  --gray-300: #d5d5d5;
  --gray-400: #a0a0a0;
  --gray-500: #6b6b6b;

  /* === DESIGN TOKENS === */
  /* Texte */
  --text-primary: #2f2f2e;
  --text-secondary: rgba(47, 47, 46, 0.7);
  --text-muted: rgba(47, 47, 46, 0.5);
  --text-inverse: #ffffff;

  /* Arrière-plans */
  --bg-main: #ffffff;
  --bg-sidebar: #FBF9F5;
  --bg-chat: #ffffff;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-overlay: rgba(0, 0, 0, 0.3);
  --bg-secondary: #f5f5f0;
  --bg-primary: #ffffff;

  /* Component-specific backgrounds */
  --floating-menu-bg: #fffbeb;

  /* Effets Glass */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-bg-hover: rgba(255, 255, 255, 0.98);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                  0 2px 8px rgba(0, 0, 0, 0.04),
                  inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.12),
                        0 4px 16px rgba(0, 0, 0, 0.08);

  /* Bordures */
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-strong: rgba(0, 0, 0, 0.25);

  /* Accents */
  --accent-primary: #f9e479;
  --accent-secondary: #C78A1E;
  --accent-success: #22c55e;
  --accent-error: #dc2626;
  --accent-warning: #f59e0b;
  --accent-info: #3b82f6;

  /* Boutons rouges (suppression, déconnexion) */
  --red-btn-bg: rgba(239, 68, 68, 0.1);
  --red-btn-bg-hover: rgba(239, 68, 68, 0.2);
  --red-btn-border: rgba(239, 68, 68, 0.3);
  --red-btn-border-hover: rgba(239, 68, 68, 0.5);
  --red-btn-color: #ef4444;
  --red-btn-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);

  /* === ESPACEMENTS === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;

  /* === BORDER RADIUS === */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* === TRANSITIONS === */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* === TYPOGRAPHIE === */
  --font-family: "Inter", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: "Inter Mono", "SF Mono", "Monaco", monospace;

  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.7;
  --line-height-relaxed: 1.85;

  /* === LAYOUT === */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 70px;
  --sidebar-gap: 8px;
  --chat-max-width: 744px;
  --input-max-width: 744px;

  /* === Z-INDEX === */
  --z-base: 1;
  --z-sidebar: 999;
  --z-fixed: 1000;
  --z-dropdown: 1001;
  --z-overlay: 1002;
  --z-modal: 9999;
  --z-toast: 10000;
}

/* === MODE SOMBRE === */
[data-theme="dark"] {
  /* Couleurs inversées - Harmonisées sur #262624 */
  --color-ivory: #262624;
  --color-cream: #262624;
  --color-charcoal: #f5f5f0;

  /* Niveaux de gris inversés */
  --gray-50: #3a3a38;
  --gray-100: #444442;
  --gray-300: #5a5a58;

  /* Texte */
  --text-primary: #f5f5f0;
  --text-secondary: rgba(245, 245, 240, 0.7);
  --text-muted: rgba(245, 245, 240, 0.5);
  --text-inverse: #262624;

  /* Arrière-plans - Tous harmonisés sur #262624 */
  --bg-main: #262624;
  --bg-sidebar: #262624;
  --bg-chat: #262624;
  --bg-card: #262624;
  --bg-input: #262624;
  --bg-secondary: #3a3a38;
  --bg-primary: #262624;

  /* Component-specific backgrounds - Dark mode */
  --floating-menu-bg: rgba(38, 38, 36, 0.95);

  /* Effets Glass - Dark Mode with enhanced blur - Harmonisé sur #262624 */
  --glass-bg: rgba(38, 38, 36, 0.95);
  --glass-bg-hover: rgba(38, 38, 36, 0.98);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                  0 2px 8px rgba(0, 0, 0, 0.25),
                  inset 0 1px 0 rgba(249, 228, 121, 0.1);
  --glass-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.5),
                        0 4px 16px rgba(0, 0, 0, 0.35);

  /* Bordures */
  --border-color: rgba(255, 255, 255, 0.1);
  --border-color-strong: rgba(255, 255, 255, 0.18);

  /* Boutons rouges (suppression, déconnexion) - Dark mode */
  --red-btn-bg: rgba(255, 107, 107, 0.15);
  --red-btn-bg-hover: rgba(255, 107, 107, 0.25);
  --red-btn-border: rgba(255, 107, 107, 0.3);
  --red-btn-border-hover: rgba(255, 107, 107, 0.5);
  --red-btn-color: #ff6b6b;
  --red-btn-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

/* Dark mode sidebar glass effect - Harmonisé avec variables CSS */
[data-theme="dark"] .conversations {
  background: var(--glass-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

[data-theme="dark"] .conversations::before {
  background: linear-gradient(135deg,
      rgba(249, 228, 121, 0.1) 0%,
      rgba(249, 228, 121, 0.02) 50%,
      rgba(249, 228, 121, 0.05) 100%);
}

/* ========================================
   2. RESET & BASE
   ======================================== */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html, body {
  scroll-behavior: smooth;
  overflow: hidden;
  height: 100vh;
}

body {
  padding: var(--spacing-sm);
  background: var(--bg-main);
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
}

/* ========================================
   3. TYPOGRAPHIE
   ======================================== */

/* Titres */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family);
  line-height: 1.3;
  font-weight: var(--font-weight-bold);
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-medium);
}

/* Texte */
p {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  margin-bottom: var(--spacing-md);
}

li {
  font-family: var(--font-family);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

/* Emphases */
strong {
  font-weight: var(--font-weight-bold);
}

em {
  font-style: italic;
  font-weight: var(--font-weight-light);
}

strong em, em strong {
  font-style: italic;
  font-weight: var(--font-weight-bold);
}

/* Listes */
ul, ol {
  padding-left: 24px;
  font-size: var(--font-size-xl);
  margin: var(--spacing-lg) 0;
}

ol li, ul li {
  margin: var(--spacing-md) 0;
  line-height: var(--line-height-normal);
}

/* Citations - style minimal sans carte */
blockquote {
  font-style: italic;
  color: var(--text-secondary);
  border-left: 3px solid var(--accent-primary);
  padding-left: 16px;
  margin: var(--spacing-lg) 0;
}

/* Liens */
a {
  color: var(--accent-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-secondary);
}

a:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========================================
   4. CODE & SYNTAXE
   ======================================== */

/* Code inline - transparent pour s'intégrer au texte */
code {
  font-family: var(--font-mono);
  font-size: inherit;
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
  font-weight: inherit;
}

/* Blocs de code - style glassmorphism simplifié */
pre {
  margin: var(--spacing-lg) 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

pre code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  background: transparent;
  color: var(--text-primary);
  padding: 20px;
  white-space: pre-wrap;
  line-height: 1.6;
  overflow-x: auto;
}

/* Highlight.js personnalisations */
.hljs {
  background: transparent !important;
  color: var(--text-primary) !important;
  padding: 20px !important;
  font-size: var(--font-size-base) !important;
  line-height: 1.6 !important;
  overflow-x: auto;
}

/* Couleurs de syntaxe (mode clair) */
.hljs-keyword, .hljs-selector-tag, .hljs-literal {
  color: #d73a49 !important;
  font-weight: var(--font-weight-semibold);
}

.hljs-string, .hljs-title, .hljs-name, .hljs-type {
  color: #032f62 !important;
  font-weight: var(--font-weight-medium);
}

.hljs-comment, .hljs-quote {
  color: #6a737d !important;
  font-style: italic;
}

.hljs-number, .hljs-regexp {
  color: #005cc5 !important;
  font-weight: var(--font-weight-medium);
}

.hljs-built_in, .hljs-class .hljs-title, .hljs-function .hljs-title {
  color: #6f42c1 !important;
  font-weight: var(--font-weight-semibold);
}

.hljs-tag {
  color: #22863a !important;
}

.hljs-attr {
  color: #6f42c1 !important;
}

/* Bouton de copie - UNIQUEMENT sur les vrais blocs <pre> */
/* Désactiver les wrappers sur texte inline (li, p, h1, etc.) */
li .hljs-copy-wrapper,
p .hljs-copy-wrapper,
h1 .hljs-copy-wrapper,
h2 .hljs-copy-wrapper,
h3 .hljs-copy-wrapper,
h4 .hljs-copy-wrapper,
h5 .hljs-copy-wrapper,
h6 .hljs-copy-wrapper,
strong .hljs-copy-wrapper {
  all: unset;
  display: inline;
}

/* Cacher les boutons Copy sur texte inline */
li .hljs-copy-button,
p .hljs-copy-button,
h1 .hljs-copy-button,
h2 .hljs-copy-button,
h3 .hljs-copy-button,
h4 .hljs-copy-button,
h5 .hljs-copy-button,
h6 .hljs-copy-button,
strong .hljs-copy-button {
  display: none !important;
}

/* Style des wrappers UNIQUEMENT dans <pre> */
pre .hljs-copy-wrapper {
  position: relative;
  display: block;
}

pre .hljs-copy-button {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  color: var(--text-primary);
  background: rgba(252, 233, 107, 0.15);
  border: 1px solid rgba(252, 233, 107, 0.4);
  border-radius: var(--radius-md);
  cursor: pointer;
  opacity: 0;
  transform: translateX(10px);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}

pre .hljs-copy-wrapper:hover .hljs-copy-button {
  opacity: 1;
  transform: translateX(0);
}

pre .hljs-copy-button:hover {
  transform: translateY(-2px);
  background: rgba(252, 233, 107, 0.25);
  border-color: rgba(252, 233, 107, 0.6);
}

pre .hljs-copy-button[data-copied="true"] {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
  color: var(--accent-success);
}

/* ========================================
   5. LAYOUT PRINCIPAL
   ======================================== */

/* Grille principale */
.row {
  display: flex;
  gap: var(--spacing-xl);
  height: calc(100vh - 16px);
  overflow: hidden;
}

.column {
  display: flex;
  flex: auto;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ========================================
   SIDEBAR - Voir client/css/sidebar.css
   ========================================

   Tous les styles du sidebar (menu latéral) ont été déplacés
   dans un fichier dédié pour une meilleure maintenabilité.

   Fichier : client/css/sidebar.css
   ======================================== */

/* ========================================
   7. ZONE DE CONVERSATION
   ======================================== */

.conversation {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-chat);
  scroll-behavior: smooth;
  position: relative;
}

/* No overlay needed - canvas handles fading */
.conversation::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Container des messages */
.conversation #messages {
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll; /* Toujours afficher la scrollbar pour éviter le saut */
  overflow-x: hidden;
  flex: 1;
  padding: 20px 20px 120px 20px;
  align-items: center;
  height: calc(100vh - 40px);
  position: relative;
  z-index: 1; /* Above the ::before radial gradient overlay */
}

/* Scrollbar personnalisée pour la zone de messages */
.conversation #messages::-webkit-scrollbar {
  width: 8px;
}

.conversation #messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  margin: 8px 0;
}

.conversation #messages::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.conversation #messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.3);
}

/* ========================================
   WELCOME SECTION - Centered chat for /new route
   ======================================== */

.welcome-container {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

/* Active state for /new route */
body.welcome-mode .welcome-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 200px;
  /* Push content up so it appears above chat bar */
  /* Full width - parent already has margin-left for sidebar */
  left: 0;
  right: 0;
}

/* No override needed for sidebar-open - parent margin handles it */

.welcome-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-lg);
}

.welcome-loader {
  width: 80px;
  height: 80px;
}

.welcome-loader loader-egg {
  width: 100%;
  height: 100%;
}

.welcome-title {
  font-family: var(--font-family);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--text-primary);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}

/* Center chat bar in welcome mode */
body.welcome-mode .modern-chat-container {
  /* Keep position: fixed to avoid double-counting margin-left from parent */
  position: fixed;
  bottom: auto;
  top: 50vh;
  transform: translateY(calc(-50% + 30px));
  /* left and right are already handled by normal .modern-chat-container rules */
  /* Horizontal centering is automatic via .modern-chat-bar { margin: 0 auto } */
}

/* No need to override left in sidebar-open mode - already handled */

/* Hide messages container in welcome mode */
body.welcome-mode .conversation #messages {
  display: none;
}

/* Fade out welcome message when sending first message */
body.welcome-mode.transitioning .welcome-content {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Message individuel */
.message {
  width: 100%;
  max-width: var(--chat-max-width);
  overflow-wrap: break-word;
  display: flex;
  padding-top: var(--spacing-xl);
  padding-bottom: 0;
}

.message:last-child {
  animation: fadeInUp 0.6s ease;
  margin-bottom: 20px;
}

/* Message utilisateur - aligné à droite dans la zone de chat centrée */
.message-user {
  flex-direction: row-reverse;
  text-align: right;
  justify-content: flex-start;
}

.message-user .content {
  background-color: #FBF9F5;
  color: var(--text-primary);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--radius-md);
  border: none;
  /* Adapt to text size */
  max-width: 85%;
  width: fit-content;
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: inline-block;
  white-space: pre-wrap;
}

/* Message assistant */
.message-assistant {
  flex-direction: row;
  text-align: left;
}

.message-assistant .content {
  background-color: transparent;
  color: var(--text-primary) !important;
  padding: 0;
  border-radius: 0;
  border: none;
  box-shadow: none;
  max-width: 100%;
  width: 100%;
}

.message-assistant .content * {
  color: inherit;
}

.message .content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  min-width: 0;
  font-size: var(--font-size-md);
}

/* Override for user messages - must come after .message .content to take precedence */
.message-user .content {
  display: inline-block;
  width: fit-content;
}

.message .content p,
.message .content li,
.message .content code {
  font-size: var(--font-size-md);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

/* Spacing entre les éléments dans les messages */
.message .content h1,
.message .content h2,
.message .content h3,
.message .content h4,
.message .content h5,
.message .content h6 {
  margin-top: var(--spacing-2xl);
  margin-bottom: var(--spacing-lg);
}

.message .content h1:first-child,
.message .content h2:first-child,
.message .content h3:first-child,
.message .content h4:first-child,
.message .content h5:first-child,
.message .content h6:first-child {
  margin-top: 0;
}

.message .content p {
  margin-bottom: var(--spacing-lg);
}

.message .content p:last-child {
  margin-bottom: 0;
}

.message .content ul,
.message .content ol {
  margin-bottom: var(--spacing-xl);
  margin-top: var(--spacing-md);
}

.message .content li {
  margin-bottom: var(--spacing-md);
}

.message .content table {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-2xl);
}

.message .content pre {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.message .content blockquote {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

/* Espacement après un titre avant un tableau */
.message .content h1 + table,
.message .content h2 + table,
.message .content h3 + table,
.message .content h4 + table,
.message .content h5 + table,
.message .content h6 + table {
  margin-top: var(--spacing-lg);
}

/* Avatars */
.message .user,
.message .assistant {
  max-width: 48px;
  max-height: 48px;
  flex-shrink: 0;
  border-style: hidden;
}

.message .user img,
.message .assistant img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  outline: 1px solid var(--border-color);
}

/* Avatar placeholder ne doit pas prendre de place */
.avatar-placeholder {
  width: 0;
  height: 0;
  display: none;
}

/* Message Footer - Structure pour loader + boutons + disclaimer */
.message-footer {
  margin-top: 12px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

/* Loader container - à gauche */
.loader-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* LoaderEgg dans le footer - taille réduite à 48px */
.loader-container loader-egg.footer-loader {
  width: 48px !important;
  height: 48px !important;
  display: block;
}

/* Actions et disclaimer - à droite */
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: auto;
  align-items: flex-end;
}

.footer-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* Actions message */
.actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.copy-icon,
.like-icon,
.dislike-icon {
  padding: 4px;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.copy-icon:hover,
.like-icon:hover,
.dislike-icon:hover {
  background-color: var(--gray-100);
}

/* Disclaimer container - En dessous des boutons, aligné à droite */
.disclaimer-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 4px;
}

.dynamic-warning {
  font-style: italic;
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  opacity: 0.85;
}

/* ❌ SUPPRIMÉ : Styles des anciennes bulles vidéo YouTube (.video-source-bubble, .video-sources-container)
   Remplacés par le nouveau système de panneau sources unifié (sources.css) */

/* ========================================
   8. BARRE DE CHAT MODERNE
   ======================================== */

.modern-chat-container {
  position: fixed;
  bottom: 0;
  left: calc(var(--sidebar-collapsed-width) + var(--sidebar-gap));
  right: 0;
  z-index: var(--z-fixed);
  padding: 20px;
  background: transparent;
  pointer-events: none;
  transition: left var(--transition-slow);
}

body.sidebar-open .modern-chat-container {
  left: calc(var(--sidebar-width) + var(--sidebar-gap));
}

.modern-chat-bar {
  max-width: var(--input-max-width);
  margin: 0 auto;
  pointer-events: auto;
}

.chat-input-wrapper {
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow: var(--glass-shadow);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.chat-input-wrapper::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.2) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.1) 100%);
  pointer-events: none;
  z-index: 0;
}

.chat-input-wrapper:focus-within {
  border-color: var(--border-color);
  box-shadow: var(--glass-shadow-hover);
}

.chat-input-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  position: relative;
  z-index: 1;
}

/* Boutons d'action dans chat */
.action-button {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.action-button:hover {
  background: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

/* Textarea */
.chat-textarea-container {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.chat-textarea {
  width: 100%;
  min-height: 48px;
  max-height: 200px;
  padding: 12px 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: var(--font-size-md);
  resize: none;
  line-height: 24px;
}

.chat-textarea::placeholder {
  color: var(--text-muted);
}

.chat-textarea::-webkit-scrollbar {
  width: 6px;
}

.chat-textarea::-webkit-scrollbar-thumb {
  background: rgba(249, 228, 121, 0.3);
  border-radius: 3px;
}

.chat-textarea::-webkit-scrollbar-thumb:hover {
  background: rgba(249, 228, 121, 0.5);
}

/* ========================================
   CLASSE UTILITAIRE - BOUTON STYLE HONEY OUTLINED
   Style réutilisable pour boutons avec contour honey
   ======================================== */

.btn-honey-outlined {
  background-color: rgba(249, 228, 121, 0.1); /* Jaune clair transparent */
  border: 1px solid rgba(199, 138, 30, 0.3); /* Contour honey */
  color: #C78A1E; /* Honey - jaune foncé */
  transition: all var(--transition-fast);
}

.btn-honey-outlined:hover {
  background-color: rgba(249, 228, 121, 0.2); /* Jaune clair plus visible au hover */
  border-color: rgba(199, 138, 30, 0.5); /* Contour honey plus visible */
}

.btn-honey-outlined i,
.btn-honey-outlined svg,
.btn-honey-outlined .icon {
  color: #C78A1E; /* Honey - jaune foncé pour les icônes */
}

/* ========================================
   BOUTON D'ENVOI - Étend btn-honey-outlined
   ======================================== */

/* ⚠️ DÉPRÉCIÉ : Les styles du bouton d'envoi sont maintenant dans send-button.css
   Ce fichier utilise le composant SendButton.js unifié.
   Ces styles sont conservés en commentaire pour référence historique.

.send-button {
  background-color: rgba(249, 228, 121, 0.1);
  border: 1px solid rgba(199, 138, 30, 0.3);
  color: #C78A1E;
  transition: all var(--transition-fast);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.send-button:hover {
  background-color: rgba(249, 228, 121, 0.2);
  border-color: rgba(199, 138, 30, 0.5);
  transform: scale(1.05);
}

.send-button i {
  color: #C78A1E;
}

.send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-button.stop-mode i {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.send-button.stop-mode i::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid #C78A1E;
  border-radius: 50%;
  pointer-events: none;
}
*/

/* Bouton Jina Search */
#jina-search-btn {
  transition: opacity 0.3s ease, transform 0.2s ease;
}

#jina-search-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

#jina-search-btn:active:not(:disabled) {
  transform: scale(0.95);
}

#jina-search-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

#jina-search-btn img {
  filter: brightness(0) saturate(100%) invert(24%) sepia(8%) saturate(422%) hue-rotate(358deg) brightness(95%) contrast(88%);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ========================================
   9. LOADER & ÉTATS
   ======================================== */

/* ✅ SUPPRIMÉ : .streaming-loader n'est plus utilisé, remplacé par MiniLoaderEgg dans le footer */

/* Loading indicator */
.loading-stream {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: var(--radius-full);
  background-color: var(--text-primary);
  animation: pulse 1.5s ease-in-out infinite;
}

/* ========================================
   11. MENUS DROPDOWN
   ======================================== */

.dropdown-menu {
  position: fixed;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  backdrop-filter: blur(25px);
  box-shadow: var(--glass-shadow-hover);
  padding: 12px;
  z-index: var(--z-dropdown);
  min-width: 280px;
  display: none;
}

.dropdown-menu.show {
  display: block;
  animation: scaleIn 0.2s ease;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-bottom: 4px;
}

.dropdown-item:last-child {
  margin-bottom: 0;
}

.dropdown-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.dropdown-item i {
  width: 24px;
  height: 24px;
  min-width: 24px;
  text-align: center;
  color: var(--text-primary);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dropdown-item-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.dropdown-item-subtitle {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* Connector menu specific styles */
.connector-menu {
  min-width: 300px;
}

.connector-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  margin-bottom: 4px;
}

.connector-item:last-child {
  margin-bottom: 0;
}

.connector-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.connector-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.connector-icon {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 16px;
}

.connector-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.3;
}

.connector-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
  padding-left: 36px;
}

/* ========================================
   USER MENU - Perfectly Aligned with Sidebar
   ======================================== */

.user-menu {
  position: fixed;
  /* Position above user-profile: gap (8px) + user-profile height (44px) + margin (8px) + spacing (8px) */
  bottom: calc(var(--sidebar-gap) + 68px);
  left: var(--sidebar-gap);
  /* ✅ LARGEUR FIXE - indépendante de l'état de la sidebar */
  width: 250px;

  /* Glassmorphic style */
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  backdrop-filter: blur(25px);
  box-shadow: var(--glass-shadow-hover);

  padding: 12px;
  z-index: calc(var(--z-dropdown) + 1);
  display: none;

  /* ✅ SMOOTH TRANSITION - only position changes */
  transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-open .user-menu {
  /* Position reste la même - menu indépendant de la sidebar */
  left: var(--sidebar-gap);
  /* ✅ LARGEUR SUPPRIMÉE - le menu garde sa largeur fixe de 250px */
}

.user-menu.show {
  display: block;
  animation: scaleIn 0.2s ease;
}

.user-menu-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-align: center;
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  /* Light mode: white background with subtle border */
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.user-email {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.user-role {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  font-weight: 500;
  text-transform: capitalize;
}

.menu-separator {
  height: 1px;
  background: var(--border-color);
  margin: var(--spacing-md) 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.menu-item i {
  width: 20px;
  min-width: 20px;
  text-align: center;
  font-size: 16px;
}

.menu-item span {
  font-size: 14px;
  font-weight: 500;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item.logout {
  /* Style magnifique rouge unifié */
  background-color: var(--red-btn-bg);
  border: 1px solid var(--red-btn-border);
  color: var(--red-btn-color);
}

.menu-item.logout:hover {
  background-color: var(--red-btn-bg-hover);
  border-color: var(--red-btn-border-hover);
  transform: translateY(-1px);
}

/* Settings Modal */
.settings-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.settings-modal.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.settings-container {
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(25px);
  box-shadow: var(--glass-shadow-hover);
  display: flex;
  overflow: hidden;
  animation: scaleIn 0.3s ease;
}

.settings-sidebar {
  width: 220px;
  background: rgba(0, 0, 0, 0.05);
  border-right: 1px solid var(--border-color);
  padding: var(--spacing-xl) var(--spacing-md);
  overflow-y: auto;
}

.settings-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
  padding: 0 var(--spacing-md);
}

.settings-nav-item {
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-xs);
}

.settings-nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.settings-nav-item.active {
  background: rgba(0, 0, 0, 0.08);
  font-weight: var(--font-weight-semibold);
}

.settings-content {
  flex: 1;
  padding: var(--spacing-2xl);
  overflow-y: auto;
}

.settings-section {
  display: none;
}

.settings-section.active {
  display: block;
}

.settings-section-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xl);
}

.settings-group {
  margin-bottom: var(--spacing-2xl);
}

.settings-group-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.settings-group-description {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--spacing-md);
}

.settings-input,
.settings-select,
.settings-textarea {
  width: 100%;
  padding: var(--spacing-md);
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  transition: all var(--transition-fast);
}

.settings-input:focus,
.settings-select:focus,
.settings-textarea:focus {
  outline: none;
  border-color: var(--border-color);
  background: rgba(255, 255, 255, 0.7);
}

.settings-textarea {
  min-height: 100px;
  resize: vertical;
}

.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
}

/* Bouton copier pour ID organisation */
.copy-org-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.copy-org-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
  border-color: var(--border-color-strong);
}

.copy-org-btn:active {
  transform: scale(0.95);
}

.copy-org-btn.copied {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  background: rgba(249, 228, 121, 0.1);
}

.copy-org-btn svg {
  width: 18px;
  height: 18px;
}

.toggle-switch {
  width: 48px;
  height: 26px;
  background: var(--gray-300);
  border-radius: 13px;
  position: relative;
  cursor: pointer;
  transition: background var(--transition-fast);
}

.toggle-switch.active {
  background: var(--accent-secondary);
}

.toggle-switch::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: transform var(--transition-fast);
}

.toggle-switch.active::after {
  transform: translateX(22px);
}

.color-mode-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.color-mode-option {
  padding: var(--spacing-lg);
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.color-mode-option:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

.color-mode-option.active {
  border-color: var(--border-color-strong);
  background: rgba(255, 255, 255, 0.6);
}

.color-mode-icon {
  font-size: var(--font-size-3xl);
  margin-bottom: var(--spacing-sm);
}

.color-mode-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

.settings-close {
  position: absolute;
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
}

.settings-close:hover {
  background: rgba(0, 0, 0, 0.2);
  transform: scale(1.1);
}

/* ========================================
   12. UTILITAIRES
   ======================================== */

/* Classes d'affichage */
.shown {
  display: flex;
}

.hidden {
  display: none !important;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* Scrollbar utilities */
.disable-scrollbars::-webkit-scrollbar {
  background: transparent;
  width: 0;
  display: none;
}

.disable-scrollbars {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Shadows */
.shadow {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.soft-shadow {
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px,
              rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

/* Glass effect utility */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ========================================
   13. ANIMATIONS
   ======================================== */

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Flash effect for message send */
@keyframes messageSendFlash {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0.4;
  }
  100% {
    opacity: 0;
  }
}

/* Flash overlay for message send effect */
.conversation-flash-overlay {
  position: absolute;
  inset: 0;
  background: #2c3e50;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.conversation-flash-overlay.flash-active {
  animation: messageSendFlash 0.6s ease-out forwards;
}

/* ========================================
   14. RESPONSIVE
   ======================================== */

/* ❌ SUPPRIMÉ : Duplication du bouton hamburger mobile
   Le bouton mobile est maintenant défini uniquement dans sidebar.css
   pour éviter les conflits de styles */

/* Tablettes et mobiles */
@media screen and (max-width: 990px) {
  body {
    padding: 8px 5px;
  }

  /* Sidebar en overlay complet sur mobile */
  .conversations {
    width: 100vw;
    left: -100vw;
    top: 0;
    height: 100vh;
    border-radius: 0;
    z-index: var(--z-modal);
    padding: var(--spacing-xl);
  }

  body.sidebar-open .conversations {
    left: 0;
  }

  /* Pas de sidebar collapsed sur mobile - tout en fullscreen */
  .chat-main-container {
    margin-left: 0;
  }

  .modern-chat-container {
    left: 0;
  }

  body.sidebar-open .chat-main-container {
    margin-left: 0;
  }

  body.sidebar-open .modern-chat-container {
    left: 0;
  }

  /* Overlay sombre */
  body.sidebar-open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-modal) - 1);
    backdrop-filter: blur(2px);
  }

  /* Messages */
  .conversation #messages {
    height: calc(100vh - 68px);
    padding-bottom: 120px;
  }

  /* Chat bar */
  .modern-chat-container {
    padding: 10px;
  }

  .chat-input-content {
    padding: var(--spacing-sm);
  }

  .action-button {
    width: 32px;
    height: 32px;
  }

  /* Menus */
  .dropdown-menu {
    max-width: calc(100vw - 40px);
  }
}

/* Petits écrans */
@media screen and (max-width: 640px) {
  h1 {
    font-size: var(--font-size-2xl);
  }

  h2 {
    font-size: var(--font-size-xl);
  }

  h3 {
    font-size: var(--font-size-lg);
  }

  p, li {
    font-size: var(--font-size-md);
  }

  .message-user .content {
    max-width: 92%;
  }
}

/* Écrans très petits en hauteur */
@media screen and (max-height: 640px) {
  .conversation #messages {
    min-height: calc(100vh - 100px);
    padding: 80px 0 120px 0;
  }

}

/* Mouvement réduit pour accessibilité */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========================================
   ANIMATION DOUCE POUR L'APPARITION DU TEXTE
   ======================================== */
.smooth-text-appear {
  animation: fadeInText 0.15s ease-in;
}

@keyframes fadeInText {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}

/* ========================================
   LOGOUT CONFIRMATION MODAL
   ======================================== */
.logout-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: calc(var(--z-modal) + 1);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
}

.logout-modal.show {
  display: flex;
  animation: fadeIn 0.2s ease;
}

.logout-modal-content {
  width: 100%;
  max-width: 400px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(25px);
  box-shadow: var(--glass-shadow-hover);
  overflow: hidden;
  animation: scaleIn 0.3s ease;
}

.logout-modal-header {
  padding: var(--spacing-xl);
  border-bottom: 1px solid var(--border-color);
}

.logout-modal-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.logout-modal-body {
  padding: var(--spacing-xl);
}

.logout-modal-body p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.6;
}

.logout-modal-footer {
  padding: var(--spacing-lg) var(--spacing-xl);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
}

.logout-cancel-btn,
.logout-confirm-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: var(--font-family);
}

.logout-cancel-btn {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-primary);
}

.logout-cancel-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.logout-confirm-btn {
  /* Style magnifique rouge unifié */
  background-color: var(--red-btn-bg);
  border: 1px solid var(--red-btn-border);
  color: var(--red-btn-color);
}

.logout-confirm-btn:hover {
  background-color: var(--red-btn-bg-hover);
  border-color: var(--red-btn-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--red-btn-shadow);
}

/* ========================================
   FIN DU FICHIER
   ======================================== */

/* ========================================
   INFINITE SCROLL - LOADING SPINNER
   ======================================== */

.conversations-loading-spinner {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin: 10px 0;
}

.conversations-loading-spinner .spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.conversations-loading-spinner .spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(var(--accent-primary-rgb), 0.2);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.conversations-loading-spinner span {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

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

/* ========================================
   FIN DU FICHIER
   ======================================== */