@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* ═══════════════════════════════════════════════════════════
   STYLE.CSS — Aya DzGPT
   Feuille de style globale partagée entre toutes les pages
   ═══════════════════════════════════════════════════════════ */



/* Design Tokens */
:root {
  --bg-primary:    #0a0a0a;
  --bg-secondary:  #111111;
  --bg-card:       #1a1a1a;
  --bg-input:      #111111;
  --accent:        #7c3aed;
  --accent-light:  #a78bfa;
  --accent-hover:  #6d28d9;
  --text-primary:  #e2e8f0;
  --text-secondary:#94a3b8;
  --border:        #2d2d3d;
  --success:       #00ff88;
  --error:         #ff4444;
  --radius:        12px;
  --radius-full:   9999px;
  --font:          'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ─────────────────────────────────────────
   1. RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  font-family: var(--font) !important;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0d0d0d;
  color: #e8eaed;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}
textarea:focus { outline: none; }
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ─────────────────────────────────────────
   2. SCROLLBAR
───────────────────────────────────────── */
::-webkit-scrollbar       { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border, rgba(139,92,246,0.28)); border-radius: var(--radius-full, 9999px); }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }


/* ─────────────────────────────────────────
   3. KEYFRAMES
───────────────────────────────────────── */
@keyframes message-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0);    }
  40%            { transform: translateY(-6px); }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes typing-wave {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
  30%            { transform: translateY(-7px); opacity: 1;    }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(139,92,246,0.35), 0 0 20px rgba(139,92,246,0.15); }
  50%       { box-shadow: 0 0 22px rgba(139,92,246,0.65), 0 0 44px rgba(59,130,246,0.25); }
}
/* Shimmer rapide — texte IA en streaming */
@keyframes shimmer {
  0%   { background-position: -300% center; }
  100% { background-position:  300% center; }
}
/* Shimmer logo app principale */
@keyframes shimmer-logo {
  0%   { background-position: -400% center; }
  100% { background-position:  400% center; }
}
/* Shimmer logo pages auth */
@keyframes shimmer-auth {
  0%, 100% { background-position: 0%   50%; }
  50%       { background-position: 100% 50%; }
}
@keyframes copy-success {
  0%   { transform: scale(1);   }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1);   }
}
@keyframes paste-flash {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.94); }
  20%  { opacity: 1; transform: translateX(-50%) scale(1);    }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) scale(1.03); }
}
@keyframes halo-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1);    }
  50%       { opacity: 0.65; transform: scale(1.18); }
}
@keyframes blink {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@keyframes float-up {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-5px); }
}
@keyframes ripple-out {
  to { transform: scale(4); opacity: 0; }
}


/* ─────────────────────────────────────────
   4. CLASSES D'ANIMATION
───────────────────────────────────────── */
.animate-message-in   { animation: message-in   0.32s cubic-bezier(0.34,1.48,0.64,1) forwards; }
.animate-dot-bounce   { animation: dot-bounce   1.4s  infinite ease-in-out; }
.animate-spin-slow    { animation: spin-slow    1s    linear   infinite; }
.animate-spin         { animation: spin         0.8s  linear   infinite; }
.animate-typing-wave  { animation: typing-wave  1.4s  infinite ease-in-out; }
.animate-pulse-glow   { animation: pulse-glow   2.2s  infinite ease-in-out; }
.animate-halo         { animation: halo-pulse   2.8s  infinite ease-in-out; }
.animate-float        { animation: float-up     3.2s  infinite ease-in-out; }
.animate-copy-success { animation: copy-success 0.3s  ease-out; }

/* Shimmer texte IA */
.animate-shimmer {
  background: linear-gradient(90deg, #8888bb 0%, #8b5cf6 40%, #3b82f6 60%, #8888bb 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2.5s linear infinite;
}
/* Shimmer logo app principale */
.animate-shimmer-logo {
  background: linear-gradient(90deg, #c4b5fd 0%, #818cf8 20%, #a78bfa 45%, #60a5fa 70%, #c4b5fd 100%);
  background-size: 400% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-logo 3s linear infinite;
}
/* Shimmer logo pages auth (login, signup, pricing) */
.logo-shimmer {
  background: linear-gradient(135deg, #a78bfa, #8b5cf6, #60a5fa);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-auth 3s ease infinite;
}


/* ─────────────────────────────────────────
   5. UTILITAIRES PARTAGÉS
───────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.06);
}
.gradient-primary { background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%); }
.gradient-primary:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #2563eb 100%);
  box-shadow: 0 0 28px rgba(139,92,246,0.45), 0 4px 16px rgba(139,92,246,0.25);
}
.gradient-text {
  background: linear-gradient(135deg, #a78bfa 0%, #60a5fa 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ─────────────────────────────────────────
   6. COMPOSANTS PARTAGÉS PAGES AUTH
      (login, signup, pricing)
───────────────────────────────────────── */
.card {
  background: rgba(22,22,42,0.85);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
}

/* Inputs auth */
.input-field {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: #e8e8f0;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  width: 100%;
  font-size: 0.9375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.input-field:focus {
  border-color: rgba(139,92,246,0.55);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1);
}
.input-field::placeholder { color: #44447a; }
.input-field.error { border-color: rgba(239,68,68,0.5); }

/* Bouton principal (gradient) */
.btn-primary {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
  font-weight: 600;
  border-radius: 0.75rem;
  padding: 0.8125rem 1.5rem;
  width: 100%;
  font-size: 0.9375rem;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-align: center;
  display: block;
  text-decoration: none;
}
.btn-primary:hover:not(:disabled)  { opacity: 0.88; }
.btn-primary:active:not(:disabled) { transform: scale(0.99); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Bouton contour */
.btn-outline {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: #e8e8f0;
  font-weight: 500;
  border-radius: 0.75rem;
  padding: 0.75rem 1.25rem;
  width: 100%;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-outline:hover { background: rgba(255,255,255,0.05); }

/* Bouton Google OAuth */
.btn-google {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: #e8e8f0;
  font-weight: 500;
  border-radius: 0.75rem;
  padding: 0.75rem 1.5rem;
  width: 100%;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.btn-google:hover { background: rgba(255,255,255,0.08); }

/* Messages feedback */
.error-box {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.22);
  color: #fca5a5;
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}
.success-box {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.22);
  color: #86efac;
  border-radius: 0.75rem;
  padding: 1.25rem;
  text-align: center;
}
.msg-box { border-radius: 0.75rem; padding: 0.75rem 1rem; font-size: 0.8125rem; line-height: 1.5; }
.info-msg    { background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.2);  color: #c4b5fd; }
.success-msg { background: rgba(34,197,94,0.08);  border: 1px solid rgba(34,197,94,0.2);   color: #86efac; }
.error-msg   { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.2);   color: #fca5a5; }

/* Labels et hints */
.label { font-size: 0.75rem; font-weight: 500; color: #8888aa; margin-bottom: 0.375rem; display: block; }
.hint  { font-size: 0.7rem; color: #44447a; margin-top: 0.25rem; }

/* Barre de force mot de passe */
.strength-bar { height: 3px; border-radius: 9999px; transition: width 0.3s, background 0.3s; }


/* ─────────────────────────────────────────
   7. PRICING — CARTES DE PLANS
───────────────────────────────────────── */
.plan-card {
  background: rgba(22,22,42,0.75);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 1.25rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.plan-card:hover { transform: translateY(-2px); }
.plan-card.popular {
  background: rgba(30,24,54,0.9);
  border: 1.5px solid rgba(139,92,246,0.45);
  box-shadow: 0 0 40px rgba(139,92,246,0.12);
}
.badge-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: white;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.875rem;
  border-radius: 9999px;
  white-space: nowrap;
}
.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 0.875rem;
  color: #c4c4d8;
}
.check-icon { flex-shrink: 0; margin-top: 1px; }

/* Modal BaridiMob */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-card {
  background: #16162a;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 1.25rem;
  padding: 1.75rem;
  width: 100%;
  max-width: 400px;
  position: relative;
}
.rip-box {
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 0.75rem;
  padding: 0.875rem 1rem;
}

/* Input ref BaridiMob (centré, monospace, uppercase) */
.input-field.ref-input {
  text-align: center;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  font-family: 'Inter', monospace;
  font-size: 1rem;
}


/* ─────────────────────────────────────────
   8. APP PRINCIPALE — Input bar
───────────────────────────────────────── */
.input-container {
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.input-container:focus-within {
  border-color: rgba(139,92,246,0.5);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.1), 0 0 48px rgba(139,92,246,0.08);
}
.send-btn-gradient {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  transition: all 0.25s ease;
}
.send-btn-gradient:hover {
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  box-shadow: 0 0 22px rgba(139,92,246,0.55), 0 4px 14px rgba(139,92,246,0.3);
  transform: scale(1.06);
}
.send-btn-gradient:active { transform: scale(0.95); }


/* ─────────────────────────────────────────
   9. APP PRINCIPALE — Markdown rendu
───────────────────────────────────────── */
/* --- Corps des réponses Aya : style Gemini --- */
.md-content {
  font-family: var(--font) !important;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -0.02em;
  color: #e8eaed;
  word-break: break-word;
}
.md-content p { margin-bottom: 1.1em; }
.md-content p:last-child { margin-bottom: 0; }

/* Headers — style Gemini : taille proche du corps, bold */
.md-content h1, .md-content h2, .md-content h3, .md-content h4 {
  font-family: var(--font) !important;
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.02em;
  margin-top: 1.4em;
  margin-bottom: 0.4em;
  color: #ffffff;
  letter-spacing: 0;
}

/* Bold — hérite la couleur du texte comme Gemini */
.md-content strong { font-weight: 600; color: inherit; }
.md-content em     { font-style: italic; color: #bdc1c6; }

/* Code */
.md-content pre { margin: 1.2rem 0; border-radius: 0.75rem; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.08); padding: 1.1rem 1.25rem; overflow-x: auto; position: relative; }
.md-content pre code { font-size: 0.8125rem; font-family: 'JetBrains Mono','Fira Code','Courier New',monospace; color: #c9d1d9; background: none; border: none; padding: 0; line-height: 1.7; }
.md-content code { border-radius: 0.3rem; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); padding: 0.15rem 0.4rem; font-size: 0.82rem; font-family: 'JetBrains Mono','Fira Code','Courier New',monospace; color: #e8eaed; }

/* Listes — style disc natif comme Gemini */
.md-content ul { list-style-type: disc; padding-left: 1.5em; margin: 0.6em 0 0.9em; }
.md-content ol { list-style-type: decimal; padding-left: 1.5em; margin: 0.6em 0 0.9em; }
.md-content ul li { margin-bottom: 0.5em; padding-left: 0.3em; color: #e8eaed; line-height: 1.75; }
.md-content ol li { margin-bottom: 0.5em; padding-left: 0.3em; color: #e8eaed; line-height: 1.75; }
.md-content ul li::before { content: none; }
.md-content ol li::before { content: none; }
.md-content ol li::marker { color: #e8eaed; font-weight: 400; }
.md-content ul li::marker { color: #e8eaed; }
.md-content li > ul, .md-content li > ol { margin: 0.3em 0 0.3em 0; }

/* Liens */
.md-content a       { color: #8ab4f8; text-decoration: underline; text-underline-offset: 2px; }
.md-content a:hover { color: #aecbfa; }

/* Citation */
.md-content blockquote { border-left: 3px solid rgba(255,255,255,0.2); padding: 0.5rem 1rem; margin: 1rem 0; background: rgba(255,255,255,0.04); border-radius: 0 0.375rem 0.375rem 0; color: #bdc1c6; }
.md-content blockquote p { margin-bottom: 0; }
.md-content hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 1.5rem 0; }

/* Tableaux */
.md-content table  { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.875rem; border: 1px solid rgba(255,255,255,0.1); border-radius: 0.5rem; overflow: hidden; font-family: 'Google Sans','Segoe UI',system-ui,sans-serif; }
.md-content thead  { background: rgba(255,255,255,0.06); }
.md-content th     { padding: 0.65rem 1rem; text-align: left; font-weight: 700; color: #e8eaed; border-bottom: 1px solid rgba(255,255,255,0.12); }
.md-content td     { padding: 0.55rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: #bdc1c6; }
.md-content tbody tr:hover         { background: rgba(255,255,255,0.03); }
.md-content tbody tr:last-child td { border-bottom: none; }


/* ─────────────────────────────────────────
   10. APP PRINCIPALE — Layout messages
───────────────────────────────────────── */
.ai-msg-row {
  display: flex; gap: 1rem;
  padding: 1.5rem 1.75rem 1.25rem;
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ai-msg-row:last-child { border-bottom: none; }

.user-msg-row {
  display: flex; justify-content: flex-end;
  padding: 1rem 1.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.user-msg-row:last-child { border-bottom: none; }
.user-msg-text {
  max-width: 72%;
  font-size: 0.9375rem; line-height: 1.7;
  color: #e8e8f0; white-space: pre-wrap; text-align: left;
}

/* Bouton copier message */
.copy-btn {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.3rem 0.75rem; border-radius: 0.5rem;
  font-size: 0.6875rem; font-weight: 500;
  color: #8888aa; background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: all 0.2s ease;
}
.copy-btn:hover  { color: #e8e8f0; background: rgba(139,92,246,0.09); border-color: rgba(139,92,246,0.28); }
.copy-btn.copied { color: #22c55e; border-color: rgba(34,197,94,0.3);  background: rgba(34,197,94,0.08); }

/* Notification paste */
.paste-notification {
  position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg,#8b5cf6,#3b82f6); color: #fff;
  padding: 0.55rem 1.5rem; border-radius: 2rem;
  font-size: 0.8125rem; font-weight: 500;
  z-index: 9999; pointer-events: none;
  box-shadow: 0 4px 24px rgba(139,92,246,0.5);
  animation: paste-flash 2s ease forwards;
}


/* Badge moteur IA */
.engine-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem; color: #55559a;
  margin-bottom: 0.5rem; display: block; letter-spacing: 0.05em;
}
.engine-badge.gemini   { color: #22c55e; }
.engine-badge.grok     { color: #f59e0b; }
.engine-badge.deepseek { color: #8b5cf6; }

/* Badge E2B — resultat sandbox */
.e2b-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding: 3px 10px;
  background: rgba(124, 58, 237, 0.1);
  border: 1px solid rgba(124, 58, 237, 0.3);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.72em;
  color: var(--accent-light, #a78bfa);
}

/* Typing indicator — animation avant le premier token */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-light, #a78bfa);
  font-size: 0.85em;
  font-style: italic;
  padding: 4px 0;
}
.typing-dots {
  display: flex;
  gap: 4px;
}
.typing-dots span {
  width: 6px; height: 6px;
  background: var(--accent, #7c3aed);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.30s; }



/* ─────────────────────────────────────────
   11. APP PRINCIPALE — Sidebar & Navigation
───────────────────────────────────────── */
.suggestion-btn {
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.suggestion-btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(139,92,246,0.07),rgba(59,130,246,0.07));
  opacity: 0; transition: opacity 0.25s ease;
}
.suggestion-btn:hover::before { opacity: 1; }
.suggestion-btn:hover {
  border-color: rgba(139,92,246,0.38) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(139,92,246,0.14);
}

.conv-item { transition: all 0.2s ease; position: relative; }
.conv-item::before {
  content: '';
  position: absolute; left: 0; top: 18%; height: 64%; width: 2.5px;
  background: linear-gradient(180deg,#8b5cf6,#3b82f6);
  border-radius: 0 2px 2px 0;
  opacity: 0; transition: opacity 0.2s ease;
}
.conv-item:hover::before,
.conv-item.conv-active::before { opacity: 1; }
.conv-item:hover { padding-left: 16px !important; }

.new-chat-btn {
  background: linear-gradient(135deg,#8b5cf6,#3b82f6);
  transition: all 0.25s ease;
}
.new-chat-btn:hover {
  background: linear-gradient(135deg,#7c3aed,#2563eb);
  box-shadow: 0 0 24px rgba(139,92,246,0.4);
  transform: translateY(-1px);
}

.sidebar-toggle-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: all 0.2s ease;
}
.sidebar-toggle-btn:hover {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.3);
  color: #a78bfa;
}


/* ─────────────────────────────────────────
   12. RTL — Mode Arabe
───────────────────────────────────────── */

/* Police Cairo — uniquement quand lang="ar" */
html[lang="ar"],
html[lang="ar"] *:not(.engine-badge):not(code):not(pre) {
  font-family: 'Cairo', 'Segoe UI', system-ui, sans-serif !important;
}

/* Direction générale via body */
html[dir="rtl"] body { direction: rtl; }

/* ── Messages IA — avatar bascule à droite ── */
html[dir="rtl"] .ai-msg-row {
  flex-direction: row-reverse;
  text-align: right;
}
html[dir="rtl"] .ai-msg-row .md-content {
  text-align: right;
}
html[dir="rtl"] .ai-msg-row .copy-btn {
  direction: ltr; /* le bouton reste LTR */
}

/* Badge moteur IA — garder LTR pour lisibilité */
html[dir="rtl"] .engine-badge {
  direction: ltr;
  text-align: right;
  unicode-bidi: embed;
}

/* ── Messages utilisateur — texte aligné à droite ── */
html[dir="rtl"] .user-msg-text { text-align: right; }

/* ── Suggestions de bienvenue — alignement RTL ── */
html[dir="rtl"] .suggestion-btn { text-align: right; }

/* ── Header : garder logo à gauche et profil à droite en RTL ── */
/* Sans ça, direction:rtl inverse le flex et l'icône profil part à gauche  */
/* avec son dropdown qui sort de l'écran.                                   */
html[dir="rtl"] header {
  direction: ltr;
}

/* ── Barre de saisie — direction RTL cascade sur les items flex ── */
html[dir="rtl"] .input-container { direction: rtl; }

/* ── Icônes directionnelles : flèches sidebar doivent pointer à droite ── */
html[dir="rtl"] .sidebar-toggle-btn svg,
html[dir="rtl"] #sidebar-close svg {
  transform: scaleX(-1);
}

/* ── Indicateur de conv active — passe à droite ── */
html[dir="rtl"] .conv-item::before {
  left: auto;
  right: 0;
  border-radius: 2px 0 0 2px;
}
html[dir="rtl"] .conv-item:hover {
  padding-right: 16px !important;
  padding-left: 0.75rem !important;
}

/* ─────────────────────────────────────────
   KaTeX — formules mathématiques (dark theme)
───────────────────────────────────────── */
.katex {
  color: var(--text-primary, #e2e8f0) !important;
  font-size: 1.08em;
  animation: fadeInMath 0.2s ease-out;
}

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

.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.7rem 1rem;
  margin: 0.75rem 0;
  background: #0d0d1a;
  border-left: 3px solid var(--accent, #7c3aed);
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Masquer les renders KaTeX incomplets pendant le stream */
.md-streaming .katex { display: none !important; }

/* ── Logo Aya — animation désintégration / reconstruction ── */
.aya-logo-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aya-logo {
  display: block;
  object-fit: contain;
  will-change: clip-path;
  clip-path: inset(0% 0 0 0);
}

@keyframes aya-loading {
  0%   { clip-path: inset(0%   0 0 0); }
  40%  { clip-path: inset(100% 0 0 0); }
  60%  { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0%   0 0 0); }
}

.aya-logo-wrap.is-loading .aya-logo {
  animation: aya-loading 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}