/* ============================================================
   IDEV-LOG · idev-ai-assistant-premium.css
   ------------------------------------------------------------
   CSS dédié pour la page /ai-assistant (chunk AIAssistant-CZbzv6OT.js).

   PRINCIPES :
   - Aucun deuxième mode sombre. Suit html.dark / .dark global du SaaS.
   - Aucun patch DOM externe.
   - Aucun localStorage de thème spécifique.
   - Aucune sidebar secondaire ajoutée.
   - Aucune position fixed/absolute qui recouvre la sidebar SaaS.
   - PRÉSERVE : crédits IA, upload, dictée, historique, nouvelle
                discussion, envoi, réponses IA, Supabase, RLS, auth.

   PROBLÈME RÉSOLU :
   Le composant AIAssistant utilise des classes Tailwind hardcodées
   en dark (text-white, bg-[#071120], gradients foncés). Sans
   surcharge, le mode CLAIR du SaaS donne du texte blanc sur fond
   clair → illisible.

   SCOPE : on cible les éléments du composant AIAssistant via les
   classes Tailwind arbitrary-value uniques (`rgba(5,10,24` ou
   `#071120`) qui n'existent QUE dans ce composant. Aucune fuite
   sur les autres pages.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   ÉLARGISSEMENT DE LA ZONE CHAT
   Le container racine du composant utilise une classe Tailwind
   très spécifique qu'on peut cibler via [class*="..."].
   ───────────────────────────────────────────────────────────── */

/* Wrapper de la page IA — élargir et utiliser tout l'espace dispo
   à droite de la sidebar SaaS sans la recouvrir */
[class*="rgba(5,10,24"][class*="rgba(4,10,22"] {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* La grille interne (cards templates) doit s'étaler aussi —
   hauteur uniforme pour un rendu équilibré (UI/UX Pro Max). */
[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: .85rem !important;
}

[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 160px !important;
}

[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button>p:last-child {
  margin-top: auto !important;
}

@media (min-width:1024px) {
  [class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width:639px) {
  [class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Textarea : agrandir verticalement pour matcher le rendu */
[class*="rgba(5,10,24"] textarea[class*="bg-[#071120]"] {
  min-height: 200px !important;
}

@media (max-width:768px) {
  [class*="rgba(5,10,24"] textarea[class*="bg-[#071120]"] {
    min-height: 160px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   MODE CLAIR — Le composant est hardcodé en dark.
   On surcharge UNIQUEMENT quand html n'a pas .dark.
   Scope : descendant du container unique [class*="rgba(5,10,24"]
   ───────────────────────────────────────────────────────────── */

html:not(.dark) [class*="rgba(5,10,24"][class*="rgba(4,10,22"] {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border-color: rgba(15, 23, 42, .10) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 12px 40px -16px rgba(15, 23, 42, .18) !important;
  color: #0F172A !important;
}

/* Titres : .text-white → dark */
html:not(.dark) [class*="rgba(5,10,24"] .text-white {
  color: #0F172A !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-3xl.text-white {
  color: #0F172A !important;
}

/* Textes secondaires .text-white/XX */
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/70,
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/72,
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/78,
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/80 {
  color: #475569 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-white\/45,
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/50 {
  color: #64748B !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-white\/30,
html:not(.dark) [class*="rgba(5,10,24"] .text-white\/40 {
  color: #94A3B8 !important;
}

/* Cards templates "bg-white/[0.03]", "bg-white/[0.05]" */
html:not(.dark) [class*="rgba(5,10,24"] .bg-white\/\[0\.03\],
html:not(.dark) [class*="rgba(5,10,24"] .bg-white\/\[0\.05\] {
  background: #FFFFFF !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04), 0 2px 6px rgba(15, 23, 42, .05) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .hover\:bg-white\/\[0\.09\]:hover {
  background: #F8FAFC !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .hover\:border-cyan-300\/50:hover {
  border-color: rgba(8, 145, 178, .40) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .border-cyan-300\/70 {
  border-color: rgba(8, 145, 178, .55) !important;
  box-shadow: 0 0 0 1px rgba(8, 145, 178, .18) !important;
}

/* Borders white/10 */
html:not(.dark) [class*="rgba(5,10,24"] .border-white\/10,
html:not(.dark) [class*="rgba(5,10,24"] .border.border-white\/10 {
  border-color: rgba(15, 23, 42, .10) !important;
}

/* Pills crédits IA */
html:not(.dark) [class*="rgba(5,10,24"] .bg-cyan-400\/10 {
  background: rgba(6, 182, 212, .10) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-cyan-200 {
  color: #0E7490 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-cyan-300 {
  color: #0891B2 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .border-cyan-400\/20,
html:not(.dark) [class*="rgba(5,10,24"] .border-cyan-400\/30 {
  border-color: rgba(8, 145, 178, .30) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .hover\:bg-cyan-400\/15:hover {
  background: rgba(6, 182, 212, .15) !important;
}

/* Textarea bg-[#071120] → blanc en clair */
html:not(.dark) [class*="rgba(5,10,24"] textarea[class*="bg-[#071120]"] {
  background: #FFFFFF !important;
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, .14) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] textarea::placeholder {
  color: #94A3B8 !important;
}

/* Boutons secondaires "bg-transparent text-white/80" */
html:not(.dark) [class*="rgba(5,10,24"] .bg-transparent.text-white\/80 {
  color: #475569 !important;
  border-color: rgba(15, 23, 42, .14) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .hover\:bg-white\/5:hover {
  background: #F1F5F9 !important;
}

/* Badges error / warning */
html:not(.dark) [class*="rgba(5,10,24"] .text-red-200 {
  color: #B91C1C !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-red-300 {
  color: #DC2626 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-amber-200 {
  color: #B45309 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .text-amber-300 {
  color: #D97706 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .bg-red-500\/10 {
  background: rgba(239, 68, 68, .08) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .bg-amber-500\/10 {
  background: rgba(245, 158, 11, .08) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .border-red-400\/40 {
  border-color: rgba(239, 68, 68, .40) !important;
}

html:not(.dark) [class*="rgba(5,10,24"] .border-amber-400\/40 {
  border-color: rgba(245, 158, 11, .40) !important;
}

/* Badges blancs "bg-white/10" */
html:not(.dark) [class*="rgba(5,10,24"] .bg-white\/10 {
  background: rgba(15, 23, 42, .06) !important;
}

/* Container "bg-black/10" */
html:not(.dark) [class*="rgba(5,10,24"] .bg-black\/10 {
  background: #F1F5F9 !important;
}

/* Decoration liens chat */
html:not(.dark) [class*="rgba(5,10,24"] .decoration-cyan-400\/60 {
  text-decoration-color: rgba(8, 145, 178, .60) !important;
}

/* Hero icon (gradient cyan→bleu) — garde le gradient en clair, juste une touche de subtilité */
/* (On ne change pas le gradient cyan/bleu qui reste joli sur fond clair) */

/* ─────────────────────────────────────────────────────────────
   MODE SOMBRE (html.dark) — peaufinement léger seulement
   Le composant est déjà dark hardcodé → on optimise le rendu
   pour matcher le ton premium attendu (sobre, ChatGPT/Gemini-like)
   ───────────────────────────────────────────────────────────── */

html.dark [class*="rgba(5,10,24"][class*="rgba(4,10,22"] {
  background: linear-gradient(180deg, rgba(11, 17, 33, .86) 0%, rgba(7, 12, 24, .92) 100%) !important;
  box-shadow: 0 30px 80px -30px rgba(34, 211, 238, .16), 0 12px 32px -12px rgba(0, 0, 0, .5) !important;
}

html.dark [class*="rgba(5,10,24"] .bg-white\/\[0\.05\] {
  background: rgba(255, 255, 255, .04) !important;
  transition: background .2s ease, border-color .2s ease, transform .2s ease !important;
}

html.dark [class*="rgba(5,10,24"] .hover\:bg-white\/\[0\.09\]:hover {
  background: rgba(255, 255, 255, .07) !important;
  transform: translateY(-1px) !important;
}

/* ─────────────────────────────────────────────────────────────
   COMMUN AUX 2 MODES — focus, transitions, accessibilité
   ───────────────────────────────────────────────────────────── */

[class*="rgba(5,10,24"] textarea {
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

[class*="rgba(5,10,24"] textarea:focus {
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .18) !important;
  outline: none !important;
}

[class*="rgba(5,10,24"] button:focus-visible {
  outline: 2px solid #06B6D4;
  outline-offset: 2px;
}

/* Cursor pointer sur les cards templates cliquables */
[class*="rgba(5,10,24"] .rounded-2xl[class*="hover:bg-white"] {
  cursor: pointer;
}

/* Smooth scroll dans la zone chat */
[class*="rgba(5,10,24"] .overflow-y-auto {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion:reduce) {
  [class*="rgba(5,10,24"] * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   PARITÉ DE PROPORTIONS (chat + sidebar) — UI/UX Pro Max
   La grille du bas (réponses chat | historique) doit garder
   des proportions agréables sur grand écran sans déborder.
   ───────────────────────────────────────────────────────────── */
[class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
  align-items: stretch !important;
}

[class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\]>div {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}

/* Neutralisation sécurisée retirée pour préserver le vrai menu SaaS. */
body.idev-ai-route .animate-fade-in {
  position: relative;
  z-index: 1;
}

/* Mode clair global pour /ai-assistant : retire l ancien fond crémeux
   imposé par le runtime patch (#e8eef6) → fond blanc/dégradé doux
   cohérent avec le SaaS. */
html:not(.dark) body.idev-ai-route #root,
html:not(.dark) body.idev-ai-route main {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%) !important;
}

html.dark body.idev-ai-route #root,
html.dark body.idev-ai-route main {
  background: transparent !important;
}

/* ============================================================
   POLISH PREMIUM v=20260509  (UI/UX Pro Max)
   Objectif : rendu /ai-assistant exempt de tout reproche,
   chat centré, large, moderne, sans menu fictif.
   ============================================================ */

/* 1) ÉLARGISSEMENT MAXIMAL DU CHAT — on annule toute contrainte
      éventuelle imposée par le layout parent (max-w internes,
      mx-auto figés) tant que body.idev-ai-route est présent. */
body.idev-ai-route main,
body.idev-ai-route [class*="container"]:not(.idev-keep-width),
body.idev-ai-route [class*="max-w-screen"] {
  max-width: none !important;
}

body.idev-ai-route .animate-fade-in {
  width: 100% !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding-inline: clamp(16px, 3vw, 32px) !important;
  padding-block: clamp(16px, 2.5vw, 32px) !important;
  box-sizing: border-box !important;
}

/* Le vrai menu SaaS est préservé. */

/* 3) WRAPPER PREMIUM — fond plus subtil, ombre douce, bord net.
      LIGHT : carte blanche premium · DARK : verre fumé. */
html:not(.dark) [class*="rgba(5,10,24"][class*="rgba(4,10,22"] {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(6, 182, 212, .06), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(99, 102, 241, .05), transparent 55%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid rgba(15, 23, 42, .08) !important;
  box-shadow:
    0 1px 0 rgba(15, 23, 42, .03),
    0 8px 24px -8px rgba(15, 23, 42, .08),
    0 24px 60px -28px rgba(15, 23, 42, .18) !important;
  border-radius: 24px !important;
  color: #0F172A !important;
}

html.dark [class*="rgba(5,10,24"][class*="rgba(4,10,22"] {
  background:
    radial-gradient(900px 420px at 0% 0%, rgba(34, 211, 238, .10), transparent 60%),
    radial-gradient(900px 420px at 100% 100%, rgba(99, 102, 241, .10), transparent 55%),
    linear-gradient(180deg, rgba(11, 17, 33, .92) 0%, rgba(7, 12, 24, .95) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow:
    0 30px 80px -30px rgba(34, 211, 238, .18),
    0 12px 32px -12px rgba(0, 0, 0, .55) !important;
  border-radius: 24px !important;
  backdrop-filter: saturate(120%);
}

/* 4) HEADER ICON — halo léger autour de l icône hero */
[class*="rgba(5,10,24"] .h-20.w-20[class*="bg-[linear-gradient"] {
  position: relative;
}

[class*="rgba(5,10,24"] .h-20.w-20[class*="bg-[linear-gradient"]::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, .22) 0%, transparent 70%);
  z-index: -1;
  animation: idev-ai-glow 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes idev-ai-glow {

  0%,
  100% {
    opacity: .55;
    transform: scale(.96)
  }

  50% {
    opacity: .95;
    transform: scale(1.04)
  }
}

/* 5) TYPOGRAPHIE FLUIDE — H1 du composant */
[class*="rgba(5,10,24"] h1.text-3xl {
  font-size: clamp(1.75rem, 2.8vw, 2.5rem) !important;
  letter-spacing: -.025em !important;
  line-height: 1.1 !important;
}

/* 6) CARDS TEMPLATES — premium hover · accessibilité focus */
[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button {
  cursor: pointer !important;
  padding: 1.1rem !important;
  border-radius: 18px !important;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1),
    border-color .2s ease,
    box-shadow .25s ease,
    background-color .2s ease !important;
  will-change: transform, box-shadow;
}

html:not(.dark) [class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .12) !important;
}

html.dark [class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px -10px rgba(34, 211, 238, .18) !important;
}

[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button:focus-visible {
  outline: 2px solid #06B6D4 !important;
  outline-offset: 2px !important;
}

/* Icone interne des cards — légère animation au hover */
[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button .h-11.w-11 {
  transition: transform .25s cubic-bezier(.16, 1, .3, 1) !important;
}

[class*="rgba(5,10,24"] .grid.grid-cols-1.sm\:grid-cols-2.xl\:grid-cols-4>button:hover .h-11.w-11 {
  transform: scale(1.06) rotate(-2deg) !important;
}

/* 7) ZONE TEXTAREA — plus de présence, focus ring soigné */
[class*="rgba(5,10,24"] textarea {
  border-radius: 14px !important;
  padding: 1rem 1.1rem !important;
  font-size: .95rem !important;
  line-height: 1.6 !important;
}

html:not(.dark) [class*="rgba(5,10,24"] textarea {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 23, 42, .12) !important;
  color: #0F172A !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, .02) !important;
}

html.dark [class*="rgba(5,10,24"] textarea {
  background: rgba(7, 17, 32, .9) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: #F1F5F9 !important;
}

[class*="rgba(5,10,24"] textarea:focus {
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .18) !important;
  outline: none !important;
}

/* 8) BOUTONS ACTIONS (Envoyer / Nouvelle disc. / Fichiers / Dicter) */
[class*="rgba(5,10,24"] button[class*="rounded-xl"] {
  transition: transform .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease !important;
}

[class*="rgba(5,10,24"] button[class*="rounded-xl"]:not([disabled]):hover {
  transform: translateY(-1px) !important;
}

[class*="rgba(5,10,24"] button[class*="rounded-xl"]:not([disabled]):active {
  transform: translateY(0) !important;
}

/* 9) PILL CRÉDITS IA — chiffres tabulaires */
[class*="rgba(5,10,24"] .inline-flex.items-center.gap-2.rounded-full {
  font-variant-numeric: tabular-nums;
}

/* 10) BADGES MODE / ACTION — letter-spacing renforcé */
[class*="rgba(5,10,24"] .text-\[10px\].uppercase.tracking-wide {
  letter-spacing: .08em !important;
  font-weight: 700 !important;
}

/* 11) ZONE RÉPONSES — scrollbar fine custom */
[class*="rgba(5,10,24"] .overflow-y-auto {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, .5) transparent;
}

[class*="rgba(5,10,24"] .overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

[class*="rgba(5,10,24"] .overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

[class*="rgba(5,10,24"] .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, .45);
  border-radius: 9999px;
}

[class*="rgba(5,10,24"] .overflow-y-auto::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, .6);
}

/* 12) BULLES DE MESSAGES — apparition douce */
[class*="rgba(5,10,24"] .space-y-3>div[class*="rounded-2xl"][class*="border"] {
  animation: idev-ai-bubble-in .42s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes idev-ai-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* 13) DIVIDER GRID — sur écrans moyens, on bascule en 1 colonne */
@media (max-width:1279px) {
  [class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] {
    grid-template-columns: 1fr !important;
  }
}

/* 14) HISTORIQUE / CONSEILS — hover engageant */
[class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\]>div:last-child>div {
  transition: border-color .2s ease, box-shadow .2s ease;
}

html:not(.dark) [class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\]>div:last-child>div:hover {
  border-color: rgba(6, 182, 212, .30) !important;
  box-shadow: 0 8px 20px -8px rgba(6, 182, 212, .15) !important;
}

html.dark [class*="rgba(5,10,24"] .grid.grid-cols-1.gap-4.xl\:grid-cols-\[minmax\(0\2c 1fr\)_340px\]>div:last-child>div:hover {
  border-color: rgba(34, 211, 238, .35) !important;
  box-shadow: 0 8px 20px -8px rgba(34, 211, 238, .18) !important;
}

/* 15) ACCESSIBILITÉ — réduction de mouvement */
@media (prefers-reduced-motion:reduce) {

  [class*="rgba(5,10,24"] *,
  body.idev-ai-route .animate-fade-in * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  [class*="rgba(5,10,24"] .h-20.w-20[class*="bg-[linear-gradient"]::after {
    animation: none !important;
  }
}

/* 16) FALLBACK : si la classe Tailwind change, on cible aussi via
       .animate-fade-in enfant direct du body.idev-ai-route. */
body.idev-ai-route .animate-fade-in>div:first-child {
  border-radius: 24px;
}