/**
 * NevAgent — Feuille de styles principale
 * Marexsoft Corporation · Développé par Kouassi Marius
 */

/* ─── Reset & Base ─────────────────────────── */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;height:100dvh;overflow:hidden}
body{font-family:'Inter',sans-serif;overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'cv02','cv03','cv04','cv11';text-rendering:optimizeLegibility}

/* ─── Scrollbars ───────────────────────────── */
.dark ::-webkit-scrollbar{width:4px;height:4px}
.dark ::-webkit-scrollbar-track{background:transparent}
.dark ::-webkit-scrollbar-thumb{background:#353940;border-radius:4px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#6b7280;border-radius:4px}

:root{--color-brand:#FF1744;--color-brand-light:#FF5252;--color-brand-rgb:255,23,68}
/* ─── Markdown ─────────────────────────────── */
.md-body h1,.md-body h2,.md-body h3{font-weight:600;margin:.8em 0 .4em}
.md-body h1{font-size:1.3em}
.md-body h2{font-size:1.1em}
.msg-user-bubble .msg-user-content{background:rgba(var(--color-brand-rgb),1);border-color:rgba(var(--color-brand-rgb),1)}
.msg-user-bubble .msg-user-content p{color:#fff!important}
.dark .msg-user-bubble .msg-user-content{background:rgba(var(--color-brand-rgb),.4);border-color:rgba(var(--color-brand-rgb),.6)}
.dark .msg-user-bubble .msg-user-content p{color:#fff!important}
.md-body code:not(pre code){background:rgba(var(--color-brand-rgb),.15);color:var(--color-brand);padding:1px 6px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.85em}
.md-body pre{background:#0d1117!important;border-radius:8px;overflow:hidden;margin:.6em 0}
.md-body ul,.md-body ol{padding-left:1.4em;margin:.4em 0}
.md-body li{margin:.2em 0}
.md-body p{margin:.4em 0}
.md-body a{color:var(--color-brand);text-decoration:underline}
.md-body blockquote{border-left:3px solid var(--color-brand);padding-left:.8em;color:#8b9099;margin:.4em 0}
.md-body table{border-collapse:collapse;width:100%;font-size:.9em;margin:.6em 0;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.md-body th,.md-body td{border:1px solid #2a2d33;padding:.4em .7em;text-align:left}
.md-body th{background:#1c1f24}

/* ─── Code Block ───────────────────────────── */
.code-header{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;background:#161b22;border-bottom:1px solid #30363d}
.code-lang{font-size:.72em;color:#8b9099;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.copy-btn{font-size:.72em;color:var(--color-brand);cursor:pointer;background:0;border:0;padding:2px 8px;border-radius:4px;transition:.15s}
.copy-btn:hover{background:rgba(79,142,247,.15)}
pre code{font-size:.82em!important;overflow-x:auto;display:block;-webkit-overflow-scrolling:touch}

/* ─── Textarea auto-resize ─────────────────── */
#msg-input{resize:none;overflow:hidden;min-height:44px;max-height:160px;-webkit-appearance:none;appearance:none}

/* ─── Sidebar ──────────────────────────────── */
#sidebar{
  transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;
  will-change:transform;
  backface-visibility:hidden;
}

/* Desktop: sidebar is part of flow */
@media(min-width:768px){
  #sidebar{position:relative;transform:none!important;visibility:visible!important;width:288px;min-width:288px;flex-shrink:0}
  #sidebar.collapsed{width:0;min-width:0;overflow:hidden;border:none}
  #sidebar-overlay{display:none!important}
}

/* Mobile: sidebar is fixed drawer */
@media(max-width:767px){
  #sidebar{
    position:fixed;top:0;left:0;z-index:40;
    width:min(288px,85vw);height:100%;height:100dvh;
    transform:translateX(-100%);visibility:hidden;
  }
  #sidebar.open{transform:translateX(0);visibility:visible}
  #sidebar-overlay{display:block}
}

/* ─── Overlay ──────────────────────────────── */
#sidebar-overlay{
  display:none;position:fixed;inset:0;z-index:39;
  background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  opacity:0;pointer-events:none;transition:opacity .28s;
}
#sidebar-overlay.active{opacity:1;pointer-events:all}

/* ─── Message animations ───────────────────── */
.msg-row{animation:fadeUp .22s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ─── Button hover animations ──────────────── */
button{transition:all .2s cubic-bezier(.4,0,.2,1)}
button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
button:active:not(:disabled){transform:translateY(0);filter:brightness(0.98)}

/* ─── Smooth transitions ───────────────────── */
.transition{transition:all .2s cubic-bezier(.4,0,.2,1)}

/* ─── Input focus glow ─────────────────────── */
#msg-input{transition:all .2s cubic-bezier(.4,0,.2,1)}
#msg-input:focus{box-shadow:none;border-color:#353940!important}

/* ─── Badge pulse ──────────────────────────── */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

/* ─── Smooth scroll ────────────────────────── */
html{scroll-behavior:smooth}

/* ─── Hover scale on clickables ────────────── */
.hover\\:scale-105:hover{transform:scale(1.05)!important}

/* ─── Settings modal ───────────────────────── */
#settings-modal{transition:opacity .2s,visibility .2s}
#settings-modal.hidden{opacity:0;visibility:hidden;pointer-events:none}
#settings-modal:not(.hidden){opacity:1;visibility:visible}

/* ─── Typing dots ──────────────────────────── */
.typing-dot{animation:blink 1.2s infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* ─── Toast ────────────────────────────────── */
#toast{transition:opacity .25s,transform .25s;transform:translateY(0)}
#toast.hidden{opacity:0;transform:translateY(8px);pointer-events:none}

/* ─── Color palette button glow ────────────── */
#color-picker-popup button{
  transition:all .15s cubic-bezier(.4,0,.2,1);
}
#color-picker-popup button:hover{
  transform:scale(1.15);
  box-shadow:0 0 12px rgba(0,0,0,.3);
}

/* ─── Quick actions scrollable on mobile ───── */
#quick-actions{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
#quick-actions::-webkit-scrollbar{display:none}
@media(min-width:640px){#quick-actions{flex-wrap:wrap!important;overflow-x:visible}}

/* ─── Message max-width ────────────────────── */
@media(max-width:480px){
  .msg-user-bubble{max-width:90%!important}
  .msg-ai-bubble{max-width:96%!important}
  #messages{padding:1rem .75rem}
}

/* ─── Focus ring ───────────────────────────── */
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}

/* ─── Prevent zoom on input focus (iOS) ───── */
input,select,textarea{font-size:16px}
@media(min-width:768px){input,select,textarea{font-size:inherit}}

/* ─── Send button glow ─────────────────────── */
#send-btn{
  position:relative;
  overflow:hidden;
}
#send-btn::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  transition:left .5s;
}
#send-btn:hover::before{left:100%}

/* ─── Sidebar button hover ─────────────────── */
#sidebar button:hover{background-color:rgba(255,23,68,.1)!important}

/* ─── Sidebar nav tabs ─────────────────────── */
.sb-nav-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border-radius:10px;font-size:.8rem;font-weight:500;transition:all .18s;cursor:pointer;border:none;background:transparent}
.sb-nav-btn:hover{background:rgba(255,23,68,.08)!important}
.sb-nav-btn.active{background:rgba(var(--color-brand-rgb),.12)!important;color:var(--color-brand)}
.dark .sb-nav-btn.active{color:var(--color-brand-light)}
.sb-nav-btn svg{flex-shrink:0;opacity:.7}
.sb-nav-btn.active svg{opacity:1}

/* ─── Sidebar search ───────────────────────── */
#sb-search-box{background:transparent;border:none;outline:none;width:100%;font-size:.8rem;color:inherit}
#sb-search-bar{border-radius:10px;transition:all .18s}
#sb-search-bar:focus-within{border-color:var(--color-brand)!important;box-shadow:0 0 0 2px rgba(var(--color-brand-rgb),.1)}

/* ─── Chat context menu ────────────────────── */
#chat-ctx-menu{position:fixed;z-index:999;min-width:170px;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.35);animation:ctxIn .14s ease both}
@keyframes ctxIn{from{opacity:0;transform:scale(.95) translateY(-4px)}to{opacity:1;transform:scale(1) translateY(0)}}
.ctx-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 14px;font-size:.82rem;cursor:pointer;border:none;background:transparent;transition:background .12s;text-align:left}
.ctx-item:hover{background:rgba(255,23,68,.09)}
.ctx-item.danger{color:#f87171}
.ctx-item.danger:hover{background:rgba(239,68,68,.12)}

/* ─── Project modal ────────────────────────── */
#projects-modal .proj-card{border-radius:12px;padding:12px;cursor:pointer;transition:all .18s;border:1.5px solid transparent}
#projects-modal .proj-card:hover{border-color:rgba(255,23,68,.3);background:rgba(255,23,68,.05)!important}
#projects-modal .proj-card.selected{border-color:var(--color-brand)!important}

/* ─── Personalize modal ────────────────────── */
#personalize-modal{transition:opacity .2s,visibility .2s}
#personalize-modal.hidden{opacity:0;visibility:hidden;pointer-events:none}
#personalize-modal:not(.hidden){opacity:1;visibility:visible}

/* ─── Rename inline input ──────────────────── */
.rename-input{background:transparent;border:none;outline:none;font-size:.75rem;width:100%;color:inherit}
.rename-input:focus{outline:1px solid rgba(255,23,68,.5);border-radius:4px}

/* ─── Message bubble hover ─────────────────── */
.msg-ai-bubble{transition:all .2s ease}
.msg-ai-bubble .md-body,.msg-ai-bubble .stream-content{border:1px solid rgba(150,150,150,.2);border-radius:12px;padding:.75rem 1rem}
.msg-row:hover .msg-ai-bubble{filter:brightness(1.02)}

/* ─── Admin panel smooth open ──────────────── */
#admin-modal{
  animation:modalSlideUp .3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlideUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:translateY(0)}
}

/* ─── Stop button pulse danger ─────────────── */
#stop-btn{
  animation:pulse-danger 1.5s ease-in-out infinite;
}
@keyframes pulse-danger{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(239,68,68,.6)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,0)}
}

/* ─── Copy button feedback ─────────────────── */
.copy-btn{
  position:relative;
  transition:all .15s ease;
}
.copy-btn:active{
  transform:scale(0.95);
  color:var(--color-brand);
  filter:brightness(1.2);
}

/* ─── Modal backdrop blur enhance ──────────── */
.backdrop-blur-sm{backdrop-filter:blur(4px);transition:backdrop-filter .3s}

/* ─── Smooth skeleton loading (if used) ───── */
@keyframes skeleton-loading{
  0%{background-color:hsl(200,20%,80%)}
  100%{background-color:hsl(200,20%,95%)}
}
.skeleton{animation:skeleton-loading 1s linear infinite alternate}

/* ─── Safe areas (notch/home bar) ──────────── */
.pb-safe{padding-bottom:env(safe-area-inset-bottom)}
.pt-safe{padding-top:env(safe-area-inset-top)}

/* ─── Input area ───────────────────────────── */
#input-area{padding-bottom:max(.75rem,env(safe-area-inset-bottom))}

/* ─── Messages container ───────────────────── */
#messages{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

/* ─── Settings modal inner scroll ──────────── */
#settings-inner{max-height:min(70vh,600px);overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ─── Ctx bar scroll on mobile ─────────────── */
#ctx-bar{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;flex-wrap:nowrap!important}
#ctx-bar::-webkit-scrollbar{display:none}

/* ─── Header safe area ─────────────────────── */
header{padding-top:env(safe-area-inset-top)}

/* ─── Admin modal ──────────────────────────── */
#admin-modal{transition:opacity .2s,visibility .2s}
#admin-modal.hidden{opacity:0;visibility:hidden;pointer-events:none}
#admin-modal:not(.hidden){opacity:1;visibility:visible}
.admin-tab{transition:color .15s,border-color .15s}

/* ── Quota bar & budget badges ─────────────────────────────────────────── */
#quota-bar { transition: opacity .3s; }
#quota-fill { transition: width .5s ease, background-color .5s; }
#quota-fill.bg-red-500 { animation: quota-pulse 1.5s infinite; }
@keyframes quota-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .5; }
}
#budget-warning {
  animation: toast-in .25s ease;
}
@keyframes toast-in {
  from { opacity:0; transform: translate(-50%,-8px); }
  to   { opacity:1; transform: translate(-50%,0); }
}
.badge-tokens, .badge-cost {
  transition: opacity .2s;
}
#admin-usage-table table { width:100%; }
#admin-usage-table td, #admin-usage-table th { padding: .25rem .5rem; }
#admin-usage-table tbody tr:hover { background: rgba(255,255,255,.04); }

/* ── Quota counter header ───────────────────────────────────────────────── */
.quota-counter {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  transition: color .4s, background .4s;
}
.quota-counter.ok     { color:#22c55e; background:rgba(34,197,94,.1); }
.quota-counter.warn   { color:#f97316; background:rgba(249,115,22,.1); }
.quota-counter.danger { color:#ef4444; background:rgba(239,68,68,.1); animation: quota-pulse 1.5s infinite; }

.msg-footer-meta {
  font-size: 0.63rem !important;
  color: #6b7280 !important;
  opacity: 0.5 !important;
  margin-top: 8px !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-weight: 400 !important;
  display: block !important;
}
.msg-footer-meta:hover { opacity: 0.85 !important; transition: opacity .2s; }

/* ─── Hover effects nav/sidebar ────────────── */
#sidebar a,#sidebar button{
  transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
  border-radius:8px;
}
#sidebar a:hover,#sidebar button:hover{
  background:rgba(var(--color-brand-rgb),.12);
  color:var(--color-brand);
  transform:translateX(4px);
}
#sidebar a.active,#sidebar button.active{
  background:rgba(var(--color-brand-rgb),.18);
  border-left:3px solid var(--color-brand);
  color:var(--color-brand);
}

/* ─── Card hover ────────────────────────────── */
[class*="card"],[class*="panel"]{
  transition:box-shadow .2s ease,transform .2s ease;
}
[class*="card"]:hover,[class*="panel"]:hover{
  box-shadow:0 4px 24px rgba(var(--color-brand-rgb),.15);
  transform:translateY(-2px);
}

/* ─── Send button pulse on hover ───────────── */
#send-btn:hover{
  box-shadow:0 0 0 4px rgba(var(--color-brand-rgb),.25);
  transform:scale(1.06);
}
#send-btn:active{transform:scale(.97)}

/* ─── Animations propres ────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

body{animation:fadeIn .35s ease both}
#sidebar{animation:fadeIn .3s ease both}
#main,#chat-main,#editor-main{animation:fadeIn .3s ease both}
.msg-row{animation:fadeUp .25s ease both}

button,a{transition:opacity .15s ease,background-color .15s ease}
button:hover:not(:disabled){opacity:.82}
button:active:not(:disabled){opacity:.65}
input:focus,textarea:focus{box-shadow:0 0 0 2px rgba(var(--color-brand-rgb),.25);transition:box-shadow .15s ease}

/* ─── Dropdowns ─────────────────────────────── */
.drop-item{
  padding:7px 14px;
  font-size:.75rem;
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.dark .drop-item:hover{background:rgba(var(--color-brand-rgb),.15);color:var(--color-brand)}
.drop-item:hover{background:rgba(var(--color-brand-rgb),.08);color:var(--color-brand)}
.drop-item.active{color:var(--color-brand);font-weight:600}

.cust-item{padding:8px 14px;font-size:.82rem;cursor:pointer;transition:background .12s ease,color .12s ease;color:#9ca3af}
.cust-item:hover{background:rgba(var(--color-brand-rgb),.15);color:var(--color-brand)}
.cust-item.active{color:var(--color-brand);font-weight:600}
.cust-menu{animation:fadeUp .18s ease both}

/* ═══════════════════════════════════════════════
   GROUPE 1 — Animations
═══════════════════════════════════════════════ */

/* ─── 1. Fondu page load ─────────────────────── */
@keyframes g1-fadein{from{opacity:0}to{opacity:1}}
body{animation:g1-fadein .4s ease both}

/* ─── 2. Messages slide-in bas ───────────────── */
@keyframes g1-slideup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.msg-row{animation:g1-slideup .28s cubic-bezier(.4,0,.2,1) both}

/* ─── 3. Scale down au clic ──────────────────── */
button:active:not(:disabled){transform:scale(.95)!important;transition:transform .08s ease!important}

/* ─── 4. Hover highlight boutons ─────────────── */
button:not(:disabled){transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
button:hover:not(:disabled){box-shadow:0 2px 12px rgba(var(--color-brand-rgb),.18)}

/* ─── 5. Pulsation send button ───────────────── */
@keyframes g1-pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(var(--color-brand-rgb),.4)}
  70%{box-shadow:0 0 0 8px rgba(var(--color-brand-rgb),0)}
  100%{box-shadow:0 0 0 0 rgba(var(--color-brand-rgb),0)}
}
#send-btn{animation:g1-pulse-ring 2.5s ease infinite}
#send-btn:hover{animation:none;box-shadow:0 0 0 4px rgba(var(--color-brand-rgb),.3)}

/* ═══════════════════════════════════════════════
   GROUPE 2 — CSS + JS léger
═══════════════════════════════════════════════ */

/* ─── 1. Textarea focus effect ───────────────── */
#msg-input{transition:box-shadow .2s ease,border-color .2s ease}
#msg-input:focus{box-shadow:0 0 0 3px rgba(var(--color-brand-rgb),.2);border-color:rgba(var(--color-brand-rgb),.6)!important}

/* ─── 2. Sidebar slide ───────────────────────── */
@keyframes g2-slidein{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
#sidebar{animation:g2-slidein .32s cubic-bezier(.4,0,.2,1) both}

/* ─── 3. Staggered nav items ─────────────────── */
#sidebar a,#sidebar button{
  opacity:0;
  animation:g1-fadein .25s ease forwards;
}
#sidebar a:nth-child(1),#sidebar button:nth-child(1){animation-delay:.05s}
#sidebar a:nth-child(2),#sidebar button:nth-child(2){animation-delay:.1s}
#sidebar a:nth-child(3),#sidebar button:nth-child(3){animation-delay:.15s}
#sidebar a:nth-child(4),#sidebar button:nth-child(4){animation-delay:.2s}
#sidebar a:nth-child(5),#sidebar button:nth-child(5){animation-delay:.25s}

/* ─── 4. Blur in modals ──────────────────────── */
[role="dialog"]{
  animation:g2-blurin .25s ease both;
  backdrop-filter:blur(0px);
}
@keyframes g2-blurin{
  from{opacity:0;transform:scale(.97);filter:blur(4px)}
  to{opacity:1;transform:scale(1);filter:blur(0)}
}

/* ─── 5. Icon rotate toggle ──────────────────── */
.icon-toggle{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.icon-toggle.active{transform:rotate(180deg)}

/* ═══════════════════════════════════════════════
   GROUPE 3 — JS modéré
═══════════════════════════════════════════════ */

/* ─── Ripple ─────────────────────────────────── */
.ripple-container{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(var(--color-brand-rgb),.25);transform:scale(0);animation:ripple-anim .5s ease;pointer-events:none}
@keyframes ripple-anim{to{transform:scale(4);opacity:0}}

/* ─── Rebond succès ──────────────────────────── */
@keyframes g3-bounce{0%,100%{transform:scale(1)}40%{transform:scale(1.15)}70%{transform:scale(.95)}}
.bounce{animation:g3-bounce .4s cubic-bezier(.4,0,.2,1)}

/* ─── Shake erreur ───────────────────────────── */
@keyframes g3-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:g3-shake .35s ease}

/* ─── Skeleton loader ────────────────────────── */
@keyframes g3-shimmer{from{background-position:-200% 0}to{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#1c1f24 25%,#2a2d33 50%,#1c1f24 75%);background-size:200% 100%;animation:g3-shimmer 1.4s ease infinite;border-radius:6px}

/* ─── Progress bar ───────────────────────────── */
#nev-progress{position:fixed;top:0;left:0;height:2px;background:var(--color-brand);width:0%;transition:width .3s ease;z-index:9999;opacity:0}
#nev-progress.active{opacity:1}

/* ═══════════════════════════════════════════════
   GROUPE 4 — JS avancé
═══════════════════════════════════════════════ */

/* ─── Confettis ──────────────────────────────── */
@keyframes g4-confetti{
  0%{transform:translateY(-10px) rotate(0deg);opacity:1}
  100%{transform:translateY(100vh) rotate(720deg);opacity:0}
}
.confetti-piece{position:fixed;top:0;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:9999;animation:g4-confetti linear forwards}

/* ─── Logo pulse ─────────────────────────────── */
@keyframes g4-logo{0%,100%{filter:drop-shadow(0 0 0px rgba(var(--color-brand-rgb),0))}50%{filter:drop-shadow(0 0 8px rgba(var(--color-brand-rgb),.6))}}
img[alt=""][class*="logo"],img[src*="Nevid"]{animation:g4-logo 3s ease infinite}

/* ─── Icones reactives ───────────────────────── */
@keyframes g4-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.icon-pop{animation:g4-pop .3s cubic-bezier(.4,0,.2,1)}

/* ─── Parallaxe subtil ───────────────────────── */
#empty-state{transition:transform .1s ease}

/* ═══════════════════════════════════════════════
   LIGHT THEME — Professionnel 2026
═══════════════════════════════════════════════ */
:root{
  --light-bg:       #f0f2f5;
  --light-surface:  #ffffff;
  --light-surface2: #f7f8fa;
  --light-border:   #e4e6ea;
  --light-text:     #111318;
  --light-text2:    #444c5a;
  --light-text3:    #8a929e;
}

html:not(.dark) body{background:var(--light-bg)!important;color:var(--light-text)!important}

/* ─── Sidebar ─────────────────────────────── */
html:not(.dark) #sidebar{
  background:var(--light-surface)!important;
  border-color:var(--light-border)!important;
  box-shadow:2px 0 12px rgba(0,0,0,.06)!important;
}

/* ─── Main area ────────────────────────────── */
html:not(.dark) #main,html:not(.dark) #chat-main{background:var(--light-bg)!important}

/* ─── Input area ───────────────────────────── */
html:not(.dark) #input-area{
  background:var(--light-surface)!important;
  border-color:var(--light-border)!important;
  box-shadow:0 -2px 12px rgba(0,0,0,.04)!important;
}
html:not(.dark) #msg-input{
  background:var(--light-surface2)!important;
  border-color:var(--light-border)!important;
  color:var(--light-text)!important;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.06)!important;
}

/* ─── Dark utility overrides ───────────────── */
html:not(.dark) .dark\:bg-dark-600{background:var(--light-surface2)!important;border-color:var(--light-border)!important}
html:not(.dark) .dark\:bg-dark-700{background:var(--light-surface)!important}
html:not(.dark) .dark\:bg-dark-800{background:var(--light-bg)!important}
html:not(.dark) .dark\:border-dark-border{border-color:var(--light-border)!important}

/* ─── Textes ───────────────────────────────── */
html:not(.dark) .dark\:text-gray-300,
html:not(.dark) .dark\:text-gray-400{color:var(--light-text2)!important}
html:not(.dark) .dark\:text-gray-500{color:var(--light-text3)!important}
html:not(.dark) .dark\:text-white{color:var(--light-text)!important}

/* ─── Modals ───────────────────────────────── */
html:not(.dark) [role="dialog"]{
  background:var(--light-surface)!important;
  box-shadow:0 20px 60px rgba(0,0,0,.12)!important;
}

/* ─── Boutons ──────────────────────────────── */
html:not(.dark) button:not(.bg-brand):not([class*="bg-brand"]){
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}

/* ─── Nav hover ────────────────────────────── */
html:not(.dark) .sb-nav-btn:hover{background:rgba(var(--color-brand-rgb),.07)!important}
html:not(.dark) .sb-nav-btn.active{background:rgba(var(--color-brand-rgb),.1)!important}
@keyframes nevSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes nevPulse{0%,100%{opacity:.4}50%{opacity:.9}}