/* =====================================================
   🇨🇮 AGORA Gouvernance CI - Thème Optimisé
   Mode Clair : Orange vibrant | Mode Sombre : Élégant
   ===================================================== */

/* -------------------- MODE CLAIR (ROOT) -------------------- */
:root {
    --primary: 30 100% 50% !important;           /* Orange CI #FF8C00 */
    --primary-foreground: 0 0% 100% !important;  /* Blanc */
    --secondary: 142 71% 45% !important;         /* Vert CI #28A745 */
    --secondary-foreground: 0 0% 100% !important;
    --background: 30 100% 97% !important;        /* Fond orange très clair */
    --foreground: 0 0% 15% !important;           /* Texte sombre */
    --card: 0 0% 100% !important;                /* Cartes blanches */
    --card-foreground: 0 0% 15% !important;
    --muted: 30 100% 95% !important;             /* Orange très pâle */
    --muted-foreground: 0 0% 40% !important;
    --accent: 30 100% 50% !important;            /* Orange accent */
    --accent-foreground: 0 0% 100% !important;
    --border: 30 50% 85% !important;             /* Bordures subtiles */
    --input: 30 50% 90% !important;              /* Input doux */
    --ring: 30 100% 50% !important;              /* Focus orange */
}

/* -------------------- MODE SOMBRE (.dark) -------------------- */
.dark {
    --background: 0 0% 8% !important;
    --foreground: 0 0% 98% !important;
    --card: 0 0% 11% !important;
    --card-foreground: 0 0% 98% !important;
    --primary: 30 100% 50% !important;
    --primary-foreground: 0 0% 100% !important;
    --secondary: 142 71% 45% !important;
    --secondary-foreground: 0 0% 100% !important;
    --muted: 0 0% 15% !important;
    --muted-foreground: 0 0% 70% !important;
    --accent: 0 0% 15% !important;
    --accent-foreground: 0 0% 98% !important;
    --border: 0 0% 20% !important;
    --input: 0 0% 20% !important;
    --ring: 30 100% 50% !important;
}

/* -------------------- FOND GÉNÉRAL -------------------- */
body {
    background: linear-gradient(135deg, hsl(30, 100%, 97%) 0%, hsl(30, 100%, 95%) 100%) !important;
    background-attachment: fixed !important;
    color: hsl(var(--foreground)) !important;
}

.dark body {
    background: linear-gradient(135deg, #0F1419 0%, #1A1F2E 100%) !important;
}

/* -------------------- COULEURS DE TEXTE MODE CLAIR -------------------- */
.text-primary {
    color: #FF8C00 !important;
}

.text-secondary-foreground {
    color: #FFFFFF !important;
}

.text-foreground {
    color: #262626 !important;
}

.dark .text-foreground {
    color: #FAFAFA !important;
}

.text-muted-foreground {
    color: #666666 !important;
}

.dark .text-muted-foreground {
    color: #B0B8C4 !important;
}

.text-orange-500 {
    color: #FF8C00 !important;
}

.text-orange-700 {
    color: #E67E00 !important;
}

.text-green-500 {
    color: #28A745 !important;
}

.text-green-600 {
    color: #218838 !important;
}

.text-green-700 {
    color: #1E7E34 !important;
}

/* -------------------- ARRIÈRE-PLANS -------------------- */
.bg-primary {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%) !important;
}

.bg-secondary {
    background: linear-gradient(135deg, #28A745 0%, #34CE57 100%) !important;
}

.bg-background {
    background-color: #FFF7ED !important;
}

.dark .bg-background {
    background-color: #0F1419 !important;
}

.bg-card {
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(255, 140, 0, 0.1) !important;
}

.dark .bg-card {
    background: linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(30, 35, 50, 0.9) 100%) !important;
}

.bg-muted {
    background-color: rgba(255, 140, 0, 0.08) !important;
}

.dark .bg-muted {
    background-color: rgba(255, 140, 0, 0.1) !important;
}

.bg-accent {
    background-color: rgba(255, 140, 0, 0.12) !important;
}

.dark .bg-accent {
    background-color: rgba(255, 140, 0, 0.15) !important;
}

.bg-orange-50 {
    background-color: #FFF7ED !important;
}

.dark .bg-orange-50 {
    background-color: rgba(255, 247, 237, 0.05) !important;
}

.bg-orange-50\/80 {
    background-color: rgba(255, 140, 0, 0.12) !important;
}

.dark .bg-orange-50\/80 {
    background-color: rgba(255, 140, 0, 0.08) !important;
}

.bg-green-50 {
    background-color: #F0FDF4 !important;
}

.dark .bg-green-50 {
    background-color: rgba(240, 253, 244, 0.05) !important;
}

.bg-green-50\/80 {
    background-color: rgba(40, 167, 69, 0.12) !important;
}

.dark .bg-green-50\/80 {
    background-color: rgba(40, 167, 69, 0.08) !important;
}

/* -------------------- BORDURES -------------------- */
.border-primary {
    border-color: #FF8C00 !important;
}

.border-input {
    border-color: rgba(255, 140, 0, 0.2) !important;
}

.dark .border-input {
    border-color: rgba(255, 140, 0, 0.2) !important;
}

.border-orange-200 {
    border-color: rgba(255, 140, 0, 0.25) !important;
}

.dark .border-orange-200 {
    border-color: rgba(255, 140, 0, 0.3) !important;
}

.border-green-200 {
    border-color: rgba(40, 167, 69, 0.25) !important;
}

.dark .border-green-200 {
    border-color: rgba(40, 167, 69, 0.3) !important;
}

.border-l-orange-400 {
    border-left-color: #FF8C00 !important;
}

.border-l-green-400 {
    border-left-color: #28A745 !important;
}

.border-l-4 {
    border-left-width: 4px !important;
    border-left-color: #FF8C00 !important;
}

/* ==================== ZONE DE SAISIE SANS BORDURES ==================== */
/* Suppression complète des bordures pour la zone de saisie principale */
textarea,
textarea.form-control,
textarea[placeholder*="Tapez votre message"],
.chat-input textarea,
.message-input textarea {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* Mode sombre - Suppression des bordures */
.dark textarea,
.dark textarea.form-control,
.dark textarea[placeholder*="Tapez votre message"],
.dark .chat-input textarea,
.dark .message-input textarea {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* États focus - Pas de bordures */
textarea:focus,
textarea.form-control:focus,
textarea[placeholder*="Tapez votre message"]:focus,
.chat-input textarea:focus,
.message-input textarea:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.dark textarea:focus,
.dark textarea.form-control:focus,
.dark textarea[placeholder*="Tapez votre message"]:focus,
.dark .chat-input textarea:focus,
.dark .message-input textarea:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* États hover - Pas de bordures */
textarea:hover,
textarea.form-control:hover,
textarea[placeholder*="Tapez votre message"]:hover,
.chat-input textarea:hover,
.message-input textarea:hover {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

.dark textarea:hover,
.dark textarea.form-control:hover,
.dark textarea[placeholder*="Tapez votre message"]:hover,
.dark .chat-input textarea:hover,
.dark .message-input textarea:hover {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

/* -------------------- BORDURES INPUT (AUTRES QUE TEXTAREA) -------------------- */
input, [contenteditable] {
    border-color: rgba(255, 140, 0, 0.12) !important;
}

.dark input, .dark [contenteditable] {
    border-color: rgba(255, 140, 0, 0.2) !important;
}

input:focus, [contenteditable]:focus {
    border-color: rgba(255, 140, 0, 0.12) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.12) !important;
}

.dark input:focus, .dark [contenteditable]:focus {
    border-color: rgba(255, 140, 0, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.15) !important;
}

/* -------------------- OMBRES -------------------- */
.shadow-lg {
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.15), 
                0 4px 12px rgba(40, 167, 69, 0.08) !important;
}

.dark .shadow-lg {
    box-shadow: 0 10px 25px rgba(255, 140, 0, 0.25), 
                0 4px 12px rgba(40, 167, 69, 0.15) !important;
}

.shadow-md {
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.12), 
                0 2px 6px rgba(40, 167, 69, 0.06) !important;
}

.dark .shadow-md {
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2), 
                0 2px 6px rgba(40, 167, 69, 0.1) !important;
}

.shadow {
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.1) !important;
}

.dark .shadow {
    box-shadow: 0 2px 8px rgba(255, 140, 0, 0.15) !important;
}

/* -------------------- BOUTONS -------------------- */
.bg-primary,
button[class*="primary"] {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

.bg-secondary,
button[class*="secondary"] {
    background: linear-gradient(135deg, #28A745 0%, #34CE57 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
}

/* -------------------- ÉTATS HOVER -------------------- */
.hover\:bg-primary:hover {
    background: linear-gradient(135deg, #E67E00 0%, #FF8C00 100%) !important;
}

.hover\:bg-secondary:hover {
    background: linear-gradient(135deg, #218838 0%, #28A745 100%) !important;
}

.hover\:bg-accent:hover {
    background-color: rgba(255, 140, 0, 0.18) !important;
}

.dark .hover\:bg-accent:hover {
    background-color: rgba(255, 140, 0, 0.2) !important;
}

/* -------------------- CODE SYNTAX HIGHLIGHTING -------------------- */
.hljs {
    background: #F5F5F5 !important;
    color: #333333 !important;
}

.dark .hljs {
    background: #1A1F2E !important;
    color: #F8F8F2 !important;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
    color: #FF8C00 !important;
}

.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
    color: #28A745 !important;
}

.hljs-string,
.hljs-type,
.hljs-built_in {
    color: #FFA500 !important;
}

.dark .hljs-string,
.dark .hljs-type,
.dark .hljs-built_in {
    color: #FFA500 !important;
}

/* -------------------- BADGES ET TAGS -------------------- */
.bg-green-500 {
    background-color: #28A745 !important;
}

.bg-orange-500 {
    background-color: #FF8C00 !important;
}

.bg-yellow-500 {
    background-color: #FFA500 !important;
}

/* -------------------- TRANSITIONS -------------------- */
.transition-all {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.transition-colors {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease !important;
}

/* -------------------- FOCUS ET RING -------------------- */
.ring-sidebar-ring {
    --tw-ring-color: #FF8C00 !important;
}

.ring-offset-background {
    --tw-ring-offset-color: #FFF7ED !important;
}

.dark .ring-offset-background {
    --tw-ring-offset-color: #0F1419 !important;
}

/* Focus visible - Excluant textarea */
*:focus-visible:not(textarea) {
    outline: 2px solid rgba(255, 140, 0, 0.5) !important;
    outline-offset: 2px !important;
}

/* -------------------- SCROLLBAR PERSONNALISÉE -------------------- */
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #FF8C00, #28A745) !important;
    border-radius: 4px !important;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 140, 0, 0.1) !important;
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(26, 31, 46, 0.5) !important;
}

/* -------------------- LOADING SHIMMER -------------------- */
.loading-shimmer {
    background: linear-gradient(90deg, 
        rgba(255, 140, 0, 0.1) 0%, 
        rgba(255, 165, 0, 0.3) 50%, 
        rgba(40, 167, 69, 0.1) 100%) !important;
    background-size: 200% 100% !important;
}

/* -------------------- ÉLÉMENTS SPÉCIAUX -------------------- */
.fill-primary {
    fill: #FF8C00 !important;
}

.text-command {
    color: #FF8C00 !important;
}

.bg-gradient-to-l {
    background-image: linear-gradient(to left, #28A745, #FF8C00) !important;
}

/* -------------------- SIDEBAR -------------------- */
.bg-sidebar {
    background-color: #FFFFFF !important;
    border-right: 1px solid rgba(255, 140, 0, 0.15) !important;
}

.dark .bg-sidebar {
    background-color: #1A1F2E !important;
}

.bg-sidebar-accent {
    background-color: rgba(255, 140, 0, 0.08) !important;
}

.dark .bg-sidebar-accent {
    background-color: rgba(255, 140, 0, 0.1) !important;
}

.border-sidebar-border {
    border-color: rgba(255, 140, 0, 0.15) !important;
}

.dark .border-sidebar-border {
    border-color: rgba(255, 140, 0, 0.2) !important;
}

.text-sidebar-foreground {
    color: #262626 !important;
}

.dark .text-sidebar-foreground {
    color: #FAFAFA !important;
}

/* -------------------- CARTES INTERACTIVES -------------------- */
.rounded-lg {
    border-radius: 12px !important;
}

.rounded-md {
    border-radius: 8px !important;
}

.hover\:shadow-lg:hover {
    box-shadow: 0 12px 28px rgba(255, 140, 0, 0.2), 
                0 6px 16px rgba(40, 167, 69, 0.1) !important;
}

.dark .hover\:shadow-lg:hover {
    box-shadow: 0 12px 28px rgba(255, 140, 0, 0.3), 
                0 6px 16px rgba(40, 167, 69, 0.2) !important;
}

/* -------------------- ANIMATIONS -------------------- */
@keyframes agora-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-pulse {
    animation: agora-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* -------------------- TYPOGRAPHIE -------------------- */
.font-bold {
    font-weight: 700 !important;
    color: #FF8C00 !important;
}

.font-semibold {
    font-weight: 600 !important;
}

h1, h2, h3, 
.text-2xl, .text-3xl, .text-4xl {
    background: linear-gradient(135deg, #FF8C00 0%, #28A745 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 700 !important;
}

/* -------------------- ÉTATS DESTRUCTIFS -------------------- */
.bg-red-500,
.bg-destructive {
    background-color: #DC3545 !important;
}

.text-red-500,
.text-destructive {
    color: #DC3545 !important;
}

.border-red-500 {
    border-color: #DC3545 !important;
}

/* -------------------- PLACEHOLDERS -------------------- */
.placeholder\:text-muted-foreground::placeholder {
    color: rgba(102, 102, 102, 0.5) !important;
}

.dark .placeholder\:text-muted-foreground::placeholder {
    color: rgba(176, 184, 196, 0.6) !important;
}

input::placeholder,
textarea::placeholder {
    color: rgba(102, 102, 102, 0.5) !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: rgba(176, 184, 196, 0.6) !important;
}

/* -------------------- RESPONSIVE DESIGN -------------------- */
@media (max-width: 768px) {
    body {
        background: linear-gradient(180deg, hsl(30, 100%, 97%) 0%, hsl(30, 100%, 95%) 100%) !important;
    }
    
    .dark body {
        background: linear-gradient(180deg, #0F1419 0%, #1A1F2E 100%) !important;
    }
    
    .shadow-lg {
        box-shadow: 0 8px 20px rgba(255, 140, 0, 0.15) !important;
    }
    
    .dark .shadow-lg {
        box-shadow: 0 8px 20px rgba(255, 140, 0, 0.2) !important;
    }
}

/* -------------------- ACCESSIBILITÉ -------------------- */
/* Focus pour tous sauf textarea */
*:focus:not(textarea) {
    outline: 2px solid rgba(255, 140, 0, 0.5) !important;
    outline-offset: 2px !important;
}

/* -------------------- RÈGLE GÉNÉRALE BORDURES - EXCLUANT TEXTAREA -------------------- */
*:not(textarea) {
    border-color: rgba(255, 140, 0, 0.15) !important;
}

.dark *:not(textarea) {
    border-color: rgba(255, 140, 0, 0.2) !important;
}

.bg-popover {
    background-color: #FFFFFF !important;
}

.dark .bg-popover {
    background-color: #1A1F2E !important;
}

.text-popover-foreground {
    color: #262626 !important;
}

.dark .text-popover-foreground {
    color: #FAFAFA !important;
}

/* =================== PATCH : ÉDITION SANS BORDURE/FOND =================== */
/* 1) Cible le champ éditable (TipTap/ProseMirror/Chainlit) */
div[contenteditable="true"],
div[contenteditable="true"]:focus,
.ProseMirror,
.ProseMirror:focus,
.cl-editor [contenteditable],
.cl-message [contenteditable] {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* 2) Supprime bordure / ring / shadow du wrapper d'édition */
.cl-message.editing,
.cl-message[data-state="editing"],
.cl-editing,
.cl-editor,
.cl-editor-container,
.cl-message:has([contenteditable="true"]),
.cl-message:has(.ProseMirror) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: 0 !important;
}

/* 3) Neutralise les utilitaires qui rajoutent un fond ou une bordure
      sur les containers de l’éditeur (bg-*, border, ring-1, shadow, etc.) */
.cl-message:has([contenteditable="true"]) .bg-card,
.cl-message:has([contenteditable="true"]) .bg-muted,
.cl-message:has([contenteditable="true"]) .bg-accent,
.cl-message:has([contenteditable="true"]) .border,
.cl-message:has([contenteditable="true"]) .ring-1,
.cl-message:has([contenteditable="true"]) .shadow,
.cl-message:has([contenteditable="true"]) .shadow-md,
.cl-message:has([contenteditable="true"]) .shadow-lg {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 4) Désactive le ring Tailwind appliqué via variables shadcn/ui */
.cl-message:has([contenteditable="true"]) {
  --tw-ring-color: transparent !important;
  --tw-ring-offset-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
}

/* 5) En mode sombre également */
.dark .cl-message:has([contenteditable="true"]),
.dark .cl-editor,
.dark .cl-message:has([contenteditable="true"]) .bg-card,
.dark .cl-message:has([contenteditable="true"]) .bg-muted,
.dark .cl-message:has([contenteditable="true"]) .bg-accent {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 6) N’empêche pas les boutons d’actions d’être visibles */
.cl-message:has([contenteditable="true"]) .edit-actions,
.cl-message:has([contenteditable="true"]) [class*="actions"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* 7) Corrige ta règle globale qui recolorait toutes les bordures.
      On la neutralise pendant l’édition pour éviter l’effet de halo. */
.cl-message:has([contenteditable="true"]) * {
  border-color: transparent !important;
}