/* ============================================================
   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 */
[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;
  gap:.75rem !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;
  }
}