/* ============================================================
   CREA AI — Premium Styles
   ============================================================ */

/* --- CSS Variables — LIGHT par défaut (comme ChatGPT/Claude) --- */
:root {
  --bg-primary:   #ffffff;
  --bg-secondary: #f4f4f4;
  --bg-tertiary:  #ebebeb;
  --bg-glass:     rgba(255,255,255,0.9);
  --bg-glass-hov: rgba(244,244,244,0.95);
  --bg-input:     #ffffff;
  --border:       #e5e5e5;
  --border-hov:   #d4d4d4;
  --border-focus: rgba(16,163,127,0.4);
  --t-primary:    #0d0d0d;
  --t-secondary:  #171717;
  --t-muted:      #404040;
  --t-dim:        #737373;
  --t-faint:      #a3a3a3;
  --accent:       #10a37f;
  --accent-l:     #1db992;
  --accent-ll:    #34c4a0;
  --accent-glow:  rgba(16,163,127,0.18);
  --accent-bg:    rgba(16,163,127,0.07);
  --danger:       #ef4444;
  --success:      #22c55e;
  --warn:         #f59e0b;
  --radius-sm:    8px;
  --radius:       12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --rail-bg:      #f9f9f9;
  --rail-border:  #e5e5e5;
  --msg-user-bg:  #f4f4f4;
}

html.dark {
  --bg-primary:   #212121;
  --bg-secondary: #2f2f2f;
  --bg-tertiary:  #3a3a3a;
  --bg-glass:     rgba(33,33,33,0.9);
  --bg-glass-hov: rgba(47,47,47,0.9);
  --bg-input:     #2f2f2f;
  --border:       #444444;
  --border-hov:   #555555;
  --border-focus: rgba(16,163,127,0.5);
  --t-primary:    #ececec;
  --t-secondary:  #d1d1d1;
  --t-muted:      #a8a8a8;
  --t-dim:        #8a8a8a;
  --t-faint:      #555555;
  --accent:       #10a37f;
  --accent-l:     #1db992;
  --accent-ll:    #34c4a0;
  --accent-glow:  rgba(16,163,127,0.2);
  --accent-bg:    rgba(16,163,127,0.1);
  --rail-bg:      #171717;
  --rail-border:  #333333;
  --msg-user-bg:  #2f2f2f;
}

/* --- Reset / Global --- */
*, *::before, *::after { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: rgba(100,116,139,0.25) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.25); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover { background: var(--crea-universe, rgba(100,116,139,0.45)); }
::selection { background: var(--accent-glow); color: var(--t-primary); }

body { background: var(--bg-primary); color: var(--t-primary); transition: background 0.25s, color 0.25s; }

/* --- Glass / Surface --- */
.glass {
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border);
  transition: background 0.2s, border-color 0.2s;
}
.glass:hover { border-color: var(--border-hov); }
.surface { background: var(--bg-secondary); border: 1px solid var(--border); }

/* Gradient text */
.gradient-text {
  background: linear-gradient(130deg, var(--accent) 0%, var(--accent-ll) 60%, var(--accent-l) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* --- Animations --- */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes slideLeft  { from { opacity:0; transform:translateX(-16px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideRight { from { opacity:0; transform:translateX(16px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideUp    { from { opacity:0; transform:translateY(100%); } to { opacity:1; transform:translateY(0); } }
@keyframes slideDown  { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulseDot   { 0%,100%{opacity:.3;}50%{opacity:1;} }
@keyframes blink      { 50%{opacity:0;} }
@keyframes scaleIn    { from{opacity:0;transform:scale(.94);} to{opacity:1;transform:scale(1);} }
@keyframes spin       { to { transform: rotate(360deg); } }
@keyframes shimmer    { 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes gradMove   { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes voicePulse { 0%,100%{box-shadow:0 0 0 0 rgba(92,124,250,.4);}50%{box-shadow:0 0 0 14px rgba(92,124,250,0);} }
@keyframes glow       { 0%,100%{box-shadow:0 0 8px var(--accent-glow);}50%{box-shadow:0 0 22px var(--accent-glow);} }
@keyframes bounceIn   { 0%{transform:scale(.3);opacity:0;} 50%{transform:scale(1.06);} 70%{transform:scale(.97);} 100%{transform:scale(1);opacity:1;} }
@keyframes ripple     { to { transform:scale(4); opacity:0; } }
@keyframes skeletonPulse { 0%,100%{opacity:.6;} 50%{opacity:.3;} }

.anim-fade-up    { animation: fadeInUp .35s ease-out both; }
.anim-fade       { animation: fadeIn .25s ease-out both; }
.anim-slide-l    { animation: slideLeft .25s ease-out both; }
.anim-slide-r    { animation: slideRight .25s ease-out both; }
.anim-slide-up   { animation: slideUp .3s cubic-bezier(.16,1,.3,1) both; }
.anim-slide-down { animation: slideDown .2s ease-out both; }
.anim-scale-in   { animation: scaleIn .2s cubic-bezier(.16,1,.3,1) both; }
.anim-bounce-in  { animation: bounceIn .45s ease-out both; }
.anim-spin       { animation: spin 1s linear infinite; }
.anim-glow       { animation: glow 2s ease-in-out infinite; }

/* Typing dots */
.typing-dot { animation: pulseDot 1.4s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }

/* Cursor */
.typing-cursor::after {
  content:'|'; animation: blink 1s step-end infinite;
  color: var(--accent); font-weight:300; margin-left:1px;
}

/* Thinking bar */
.thinking-bar {
  background: linear-gradient(90deg, transparent, var(--accent-glow), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.8s linear infinite;
}

/* Voice pulse */
.voice-pulse { animation: voicePulse 1.5s ease-in-out infinite; }

/* Welcome gradient bg */
.gradient-bg {
  background: linear-gradient(-45deg, #060912, #0f172a, #090d1f, #0c1029);
  background-size: 400% 400%;
  animation: gradMove 18s ease infinite;
}
html.light .gradient-bg {
  background: linear-gradient(-45deg, #f8fafc, #eef2ff, #f0f4ff, #e8edfe);
  background-size: 400% 400%;
}

/* --- Markdown content --- */
.msg-content { overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.msg-content p { margin-bottom:.6rem; line-height:1.78; }
.msg-content p:last-child { margin-bottom:0; }
.msg-content ul,.msg-content ol { margin-bottom:.6rem; padding-left:1.5rem; }
.msg-content ul { list-style: disc; }
.msg-content ol { list-style: decimal; }
.msg-content li { margin-bottom:.25rem; line-height:1.65; }
.msg-content li > ul, .msg-content li > ol { margin-top:.2rem; margin-bottom:0; }
.msg-content h1,.msg-content h2,.msg-content h3,.msg-content h4 { font-weight:600; margin:1rem 0 .4rem; color:var(--t-secondary); }
.msg-content h1 { font-size:1.3rem; } .msg-content h2 { font-size:1.15rem; }
.msg-content h3 { font-size:1.05rem; } .msg-content h4 { font-size:.95rem; }
.msg-content code:not(pre code) {
  background: rgba(92,124,250,.1); color: var(--accent-ll);
  padding:.12rem .38rem; border-radius:.3rem; font-size:.84em;
  font-family:'JetBrains Mono',monospace; border:1px solid rgba(92,124,250,.12);
}
html.light .msg-content code:not(pre code) { background:rgba(76,110,245,.08); color:#4263eb; }
.msg-content pre { margin-bottom:.75rem; border-radius:var(--radius); overflow-x:auto; }
.msg-content blockquote {
  border-left:3px solid var(--accent); padding-left:1rem; margin-bottom:.75rem;
  color:var(--t-muted); font-style:italic; background: var(--accent-bg);
  padding:.5rem 1rem; border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.msg-content img { max-width:min(100%,400px); border-radius:14px; margin:.5rem 0; border:1px solid var(--border); }

/* --- Responsive mobile --- */
.md-hide-desktop { display:none; }
@media (max-width:767px) {
  .md-hide-desktop { display:flex; }                 /* burger + bouton onglets visibles sur mobile */
  .banner-new { font-size:11px; padding:6px 10px; }  /* bannière compacte */
  .banner-new span:nth-child(2) { display:none; }    /* cacher texte long, garder badge */
  #messages-container .mx-auto { padding-left:.75rem; padding-right:.75rem; }
  #crea-tabbar { display:none; }                     /* barre d'onglets navigateur masquée : gérée par le bouton à côté du menu */
}
/* Modale Réglages — bottom-sheet sur mobile, sidebar sur desktop */
.settings-modal { height: 92svh; max-height: 92svh; }
@media (min-width: 640px) { .settings-modal { height: 90vh; max-height: 620px; } }
/* Onglets : border-bottom sur mobile (tabs en haut), border-right sur desktop (sidebar gauche) */
.settings-tabs { border-top: none; border-right: none; border-bottom: 1px solid var(--border); }
@media (min-width: 640px) { .settings-tabs { border-bottom: none; border-right: 1px solid var(--border); } }

/* Tableaux : scroll horizontal sur mobile au lieu de déborder */
.msg-content table { display:block; max-width:100%; overflow-x:auto; border-collapse:collapse; margin-bottom:.75rem; font-size:.875em; -webkit-overflow-scrolling:touch; white-space:nowrap; }
.msg-content th,.msg-content td { border:1px solid var(--border); padding:.5rem .75rem; text-align:left; }
.msg-content th { background:var(--accent-bg); font-weight:600; color:var(--t-secondary); }
.msg-content td { color:var(--t-muted); }
.msg-content tr:hover td { background: rgba(255,255,255,.02); }
.msg-content a { color:var(--accent-l); text-decoration:underline; text-underline-offset:2px; }
.msg-content a:hover { color:var(--accent-ll); }
.msg-content hr { border:none; border-top:1px solid var(--border); margin:1rem 0; }
.msg-content strong { color:var(--t-secondary); font-weight:600; }
.msg-content em { color:var(--t-muted); }
.msg-content .katex-display { margin:.75rem 0; overflow-x:auto; }
.msg-content .katex { font-size:1.05em; }
.mermaid-container { margin:.75rem 0; border-radius:var(--radius); overflow:hidden; background:var(--bg-tertiary); padding:1.25rem; border:1px solid var(--border); }
.mermaid-container svg { max-width:100%; }

/* Fade — messages disparaissent élégamment derrière le header */
.chat-fade-top {
  position:absolute; top:0; left:0; right:0; height:56px;
  background:linear-gradient(to bottom, var(--bg-primary) 0%, transparent 100%);
  pointer-events:none; z-index:10;
}

/* Orbe live mini — bouton flottant au-dessus de la barre de saisie */
.live-orbe {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,#f43f5e,#ec4899);
  display:flex; align-items:center; justify-content:center;
  color:white; border:none; cursor:pointer;
  box-shadow:0 4px 16px rgba(244,63,94,.35);
  transition:transform .2s ease, box-shadow .2s ease;
}
.live-orbe:hover { transform:scale(1.08); }
.live-orbe:active { transform:scale(0.95); }
@keyframes orbe-pulse {
  0%,100% { box-shadow:0 0 0 0 rgba(244,63,94,.5), 0 4px 16px rgba(244,63,94,.35); }
  50% { box-shadow:0 0 0 10px rgba(244,63,94,0), 0 4px 16px rgba(244,63,94,.35); }
}
@keyframes orbe-breathe {
  0%,100% { transform:scale(1); box-shadow:0 4px 16px rgba(244,63,94,.35); }
  50% { transform:scale(1.12); box-shadow:0 8px 28px rgba(244,63,94,.55); }
}
.live-orbe-listening { animation:orbe-pulse 1.2s ease-in-out infinite; }
.live-orbe-speaking  { animation:orbe-breathe 1.8s ease-in-out infinite; }

/* --- Minimap d'échanges (pointillés type Claude/GPT) --- */
.chat-minimap { max-height:70vh; overflow:hidden; padding-left:2px; }
.chat-minimap-dot { background:transparent; border:0; cursor:pointer; padding:2px 0; }
.chat-minimap-pip { display:block; width:7px; height:7px; border-radius:9999px; background:var(--t-faint); opacity:.45; transition:all .15s ease; flex-shrink:0; }
.chat-minimap-dot:hover .chat-minimap-pip { opacity:1; width:18px; background:var(--accent); }
.chat-minimap-preview {
  max-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; opacity:0;
  font-size:11px; color:var(--t-secondary); background:var(--bg-primary);
  border:1px solid var(--border-hov); border-radius:9999px; padding:0; line-height:1.6;
  transition:all .18s ease; box-shadow:0 4px 16px rgba(0,0,0,.18); pointer-events:none;
}
.chat-minimap-dot:hover .chat-minimap-preview { max-width:240px; opacity:1; padding:3px 10px; margin-left:4px; }

/* Flash quand on saute à un message via la minimap / les fichiers */
.jump-flash { animation:jumpFlash 1.2s ease; border-radius:14px; }
@keyframes jumpFlash { 0%,100%{ background:transparent } 25%{ background:var(--accent-bg) } }

/* Panneau latéral fichiers du chat */
.anim-slide-in-right { animation:slideInRight .22s ease; }
@keyframes slideInRight { from{ transform:translateX(12px); opacity:0 } to{ transform:translateX(0); opacity:1 } }

/* Suggestions de la barre de questions (type Google) */
.input-suggest { max-height:280px; overflow-y:auto; animation:suggIn .14s ease; }
.input-suggest button + button { border-top:1px solid var(--border); }
@keyframes suggIn { from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:translateY(0) } }

/* Réponse longue encadrée dans un document OUVERT */
.answer-doc-body { max-height:60vh; overflow-y:auto; }
.answer-doc-btn { font-size:11px; padding:3px 8px; border-radius:8px; border:1px solid var(--border); color:var(--t-secondary); background:transparent; white-space:nowrap; transition:background .15s ease; }
.answer-doc-btn:hover { background:rgba(0,0,0,.06); }

/* --- Code blocks (premium) --- */
.code-block-wrapper {
  margin:.75rem 0; border-radius:var(--radius-lg); border:1px solid var(--border);
  background:#050b15; overflow:hidden; position:relative;
  transition: border-color .2s;
}
html.light .code-block-wrapper { background:#0f172a; }
.code-block-wrapper:hover { border-color: var(--border-hov); }
.code-block-header {
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid var(--border); padding:.4rem .9rem; background: rgba(255,255,255,.025);
}
.code-lang-badge {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; font-family:'JetBrains Mono',monospace;
  color: var(--t-dim); letter-spacing:.04em; text-transform:uppercase;
}
.code-block-body { overflow-x:auto; position:relative; -webkit-overflow-scrolling:touch; }
.code-line-numbers {
  display:inline-block; min-width:2.5rem; padding:.85rem .5rem .85rem .9rem;
  text-align:right; font-family:'JetBrains Mono',monospace; font-size:.78rem;
  line-height:1.7; color:var(--t-faint); user-select:none; border-right:1px solid var(--border);
  background: rgba(255,255,255,.015);
}
.code-content {
  display:inline-block; padding:.85rem .9rem; font-family:'JetBrains Mono',monospace;
  font-size:.78rem; line-height:1.7; color:#cdd9f0; min-width:0; white-space:pre;
}
.copy-btn-code {
  display:flex; align-items:center; gap:.375rem; padding:.25rem .625rem;
  border-radius:.4rem; font-size:.69rem; cursor:pointer; transition:all .15s;
  color:var(--t-dim); background:transparent; border:none;
}
.copy-btn-code:hover { background:rgba(255,255,255,.07); color:var(--t-primary); }
.copy-btn-code.copied { color: var(--success); }

/* --- Textarea --- */
textarea { field-sizing:content; }

/* --- Input toolbar buttons --- */
.input-tool-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .55rem; border-radius: .5rem;
  font-size: .72rem; font-weight: 500; cursor: pointer;
  color: var(--t-dim); background: transparent; border: none;
  transition: all .15s; white-space: nowrap; position: relative;
}
.input-tool-btn:hover { background: var(--bg-glass-hov); color: var(--t-primary); }
.input-tool-btn svg { flex-shrink: 0; }

.input-tool-toggle { border: 1px solid transparent; }
.input-tool-toggle:hover { border-color: var(--border-hov); }

.input-tool-toggle.active-web {
  background: rgba(34,197,94,.1); color: #22c55e;
  border-color: rgba(34,197,94,.25);
}
.input-tool-toggle.active-think {
  background: rgba(167,139,250,.1); color: #a78bfa;
  border-color: rgba(167,139,250,.25);
}

/* Model pill in toolbar */
.input-tool-model {
  border: 1px solid var(--border-hov);
  background: var(--bg-tertiary);
  padding: .28rem .6rem;
  gap: .4rem;
}
.input-tool-model:hover {
  border-color: var(--border-focus);
  background: var(--bg-glass-hov);
}

.input-tool-dot {
  width: 5px; height: 5px; border-radius: 50%;
  display: inline-block; margin-left: .1rem;
  animation: pulse 2s ease-in-out infinite;
}

/* --- Send button --- */
.send-btn {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .45rem .875rem; border-radius: .75rem;
  font-size: .8125rem; font-weight: 500; cursor: pointer;
  background: linear-gradient(135deg, #4c6ef5, #5c7cfa);
  color: white; border: none;
  box-shadow: 0 2px 8px rgba(92,124,250,.3);
  transition: all .15s; white-space: nowrap;
}
.send-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 16px rgba(92,124,250,.4); }
.send-btn:active { transform: scale(.96); }

.send-btn.stop-btn {
  background: rgba(239,68,68,.12);
  color: #f87171;
  box-shadow: none;
  border: 1px solid rgba(239,68,68,.2);
}
.send-btn.stop-btn:hover { background: rgba(239,68,68,.2); }

/* --- Sidebar items --- */
.sidebar-item { transition:all .15s ease; position:relative; }
.sidebar-item:hover { background:var(--bg-glass-hov); }
.sidebar-item.active { background:var(--accent-bg); border-color:rgba(92,124,250,.15) !important; }

/* --- Dropdown --- */
.dropdown-enter { animation:scaleIn .15s cubic-bezier(.16,1,.3,1); transform-origin:top left; }

/* --- Animations intelligentes globales --- */
/* Overlay semi-transparent derrière tout dropdown ouvert */
.panel-overlay {
  position:fixed;inset:0;z-index:49;
  background:transparent;
  cursor:default;
  pointer-events:auto;
}
/* Transitions fluides sur tous les éléments interactifs */
.modenav-btn { transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; }
.modenav-btn:active { transform:scale(.95); }

/* Sidebar slide-in/out */
#sidebar { transition:transform .22s cubic-bezier(.16,1,.3,1); }
#sidebar-backdrop { animation:fadeIn .18s ease-out; }

/* Input toolbar — masquer scrollbar */
.input-toolbar::-webkit-scrollbar { display:none; }

/* Modal/panel : backdrop + scale-in */
.modal-backdrop { animation:fadeIn .18s ease-out; }
.modal-panel    { animation:scaleIn .2s cubic-bezier(.16,1,.3,1); }

/* Studios nav dropdown rows */
#studios-nav-drop button { transition:background .1s ease, transform .08s ease, color .1s ease; }
#studios-nav-drop button:active { transform:scale(.97); }

/* Chips input — pas d'overflow visible */
.input-chip { flex-shrink:0; white-space:nowrap; }

/* ============================================================
   PREMIUM FEATURES
   ============================================================ */

/* --- Command Palette --- */
.cmd-palette-backdrop {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.55); backdrop-filter:blur(8px);
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:14vh;
  animation: fadeIn .15s ease-out;
}
.cmd-palette {
  width:100%; max-width:580px; margin:0 1rem;
  border-radius:var(--radius-xl); overflow:hidden;
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(92,124,250,.08);
  animation: scaleIn .18s cubic-bezier(.16,1,.3,1);
}
html.light .cmd-palette { box-shadow:0 32px 80px rgba(0,0,0,.18); }
.cmd-input-wrap {
  display:flex; align-items:center; gap:.75rem;
  padding:.875rem 1.125rem; border-bottom:1px solid var(--border);
}
.cmd-input {
  flex:1; background:transparent; border:none; outline:none;
  font-size:1rem; color:var(--t-primary); font-family:inherit;
}
.cmd-input::placeholder { color:var(--t-faint); }
.cmd-results { max-height:380px; overflow-y:auto; padding:.375rem; }
.cmd-group-label {
  padding:.375rem .75rem .25rem; font-size:.65rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--t-dim);
}
.cmd-item {
  display:flex; align-items:center; gap:.75rem; padding:.6rem .875rem;
  border-radius:var(--radius-sm); cursor:pointer; transition:all .1s;
  color:var(--t-secondary);
}
.cmd-item:hover, .cmd-item.active {
  background:var(--accent-bg); color:var(--t-primary);
}
.cmd-item .cmd-icon { width:1.75rem; height:1.75rem; border-radius:.5rem; display:flex; align-items:center; justify-content:center; background:var(--bg-tertiary); flex-shrink:0; font-size:.875rem; }
.cmd-item .cmd-label { flex:1; font-size:.875rem; }
.cmd-item .cmd-hint { font-size:.7rem; color:var(--t-dim); font-family:'JetBrains Mono',monospace; }
.cmd-empty { padding:2.5rem 1rem; text-align:center; color:var(--t-dim); font-size:.875rem; }

/* --- Context Menu --- */
.ctx-menu {
  position:fixed; z-index:400; min-width:180px;
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  border-radius:var(--radius); padding:.3rem;
  box-shadow:0 8px 32px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.2);
  animation: scaleIn .12s cubic-bezier(.16,1,.3,1);
}
html.light .ctx-menu { box-shadow:0 8px 32px rgba(0,0,0,.12); }
.ctx-item {
  display:flex; align-items:center; gap:.625rem; padding:.45rem .75rem;
  border-radius:.45rem; cursor:pointer; font-size:.8125rem; color:var(--t-secondary);
  transition:all .1s; white-space:nowrap;
}
.ctx-item:hover { background:var(--accent-bg); color:var(--t-primary); }
.ctx-item.danger:hover { background:rgba(239,68,68,.1); color:var(--danger); }
.ctx-separator { height:1px; background:var(--border); margin:.25rem 0; }

/* --- Slash command autocomplete menu --- */
.slash-item { transition:background .12s; }
.slash-item.slash-active, .slash-item:hover { background:var(--accent-bg); }
#slash-menu { animation:fadeInUp .12s ease; }
@keyframes fadeInUp { from { opacity:0; transform:translateY(4px) } to { opacity:1; transform:translateY(0) } }

/* --- Inline title edit --- */
.conv-title-input {
  background:var(--accent-bg); border:1px solid var(--border-focus);
  border-radius:.4rem; padding:.1rem .4rem; font-size:.875rem;
  color:var(--t-primary); outline:none; width:100%;
}

/* --- Token counter --- */
.token-counter {
  display:inline-flex; align-items:center; gap:.375rem;
  padding:.2rem .5rem; border-radius:9999px; font-size:.65rem;
  font-family:'JetBrains Mono',monospace;
  background:var(--bg-tertiary); border:1px solid var(--border);
  color:var(--t-dim); transition:all .3s;
}
.token-counter.warn { border-color:rgba(245,158,11,.3); color:var(--warn); background:rgba(245,158,11,.05); }
.token-counter.crit { border-color:rgba(239,68,68,.3); color:var(--danger); background:rgba(239,68,68,.05); }

/* --- Conversation search (Ctrl+F) --- */
.conv-search-bar {
  position:absolute; top:0; right:0; z-index:20;
  display:flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:0 0 0 var(--radius);
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  border-top:none; border-right:none;
  animation: slideDown .2s ease-out;
  box-shadow:0 4px 16px rgba(0,0,0,.15);
}
.conv-search-input {
  background:transparent; border:none; outline:none;
  font-size:.8125rem; color:var(--t-primary); width:180px;
}
.conv-search-input::placeholder { color:var(--t-dim); }
.search-highlight { background:rgba(245,158,11,.3); border-radius:2px; padding:0 1px; }
.search-highlight.current { background:rgba(245,158,11,.6); }

/* --- Status bar --- */
.status-bar {
  position:fixed; bottom:0; left:0; right:0; z-index:10;
  height:22px; display:flex; align-items:center; gap:1rem; px-4:;
  padding:0 1rem; border-top:1px solid var(--border);
  background:var(--bg-secondary);
  font-size:.65rem; font-family:'JetBrains Mono',monospace;
}
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--success); }
.status-dot.loading { background:var(--warn); animation: pulse 1s ease-in-out infinite; }
.status-dot.error { background:var(--danger); }

/* --- Skeleton loaders --- */
.skeleton {
  background:linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size:200% 100%;
  animation: shimmer 1.4s ease-in-out infinite; border-radius:var(--radius-sm);
}

/* --- Premium message bubbles --- */
/* Bulle user — gris clair comme ChatGPT */
.msg-user-bubble {
  background: var(--msg-user-bg);
  border:1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
}
html.dark .msg-user-bubble {
  background: var(--bg-secondary);
  border-color: var(--border);
}
.msg-ai-container { position:relative; }

/* --- Message timestamp --- */
.msg-ts { font-size:.6rem; color:var(--t-faint); opacity:0; transition:opacity .2s; margin-top:.25rem; }
.msg-ts.visible { opacity:1; }

/* --- File chips --- */
.file-chip {
  display:inline-flex; align-items:center; gap:.375rem; padding:.25rem .6rem;
  border-radius:.5rem; background:var(--accent-bg); border:1px solid rgba(92,124,250,.15);
  font-size:.72rem; color:var(--accent-l); transition:all .15s;
}
.file-chip:hover { border-color:var(--accent); }

/* --- Drag overlay --- */
.drag-overlay {
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:rgba(6,9,18,.88); backdrop-filter:blur(8px);
  border:2px dashed var(--accent); animation:fadeIn .15s ease-out;
}

/* --- Toast --- */
.toast {
  position:fixed; bottom:2rem; left:50%; transform:translateX(-50%);
  z-index:500; padding:.625rem 1.125rem; border-radius:var(--radius);
  background:var(--bg-secondary); border:1px solid var(--border-hov);
  color:var(--t-primary); font-size:.8125rem;
  animation:slideUp .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  display:flex; align-items:center; gap:.5rem; white-space:nowrap;
  transition:transform .2s cubic-bezier(.16,1,.3,1), opacity .3s;
}
.toast.success { border-color:rgba(34,197,94,.25); }
.toast.error   { border-color:rgba(239,68,68,.25); }
.toast.info    { border-color:rgba(92,124,250,.25); }

/* --- KBD --- */
.kbd {
  display:inline-block; padding:.1rem .4rem; border-radius:.3rem;
  background:var(--bg-tertiary); border:1px solid var(--border-hov);
  font-size:.625rem; font-family:'JetBrains Mono',monospace; color:var(--t-dim);
  line-height:1.5; letter-spacing:.03em;
}

/* --- Badges --- */
.badge {
  display:inline-flex; align-items:center; gap:.25rem; padding:.1rem .5rem;
  border-radius:9999px; font-size:.65rem; font-weight:500;
}
.badge-web    { background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2); color:#22c55e; }
.badge-think  { background:rgba(167,139,250,.1); border:1px solid rgba(167,139,250,.2); color:#a78bfa; }
.badge-folder { font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }

/* --- Artifacts panel --- */
.artifacts-panel { animation:slideRight .28s cubic-bezier(.16,1,.3,1); border-left:1px solid var(--border); }
.artifact-tab { padding:.35rem .7rem; border-radius:.4rem; font-size:.72rem; cursor:pointer; transition:all .15s; color:var(--t-dim); }
.artifact-tab:hover { color:var(--t-primary); background:var(--bg-glass-hov); }
.artifact-tab.active { color:var(--t-primary); background:var(--accent-bg); }
.art-tool-btn { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:.5rem; color:var(--t-dim); cursor:pointer; transition:all .15s; background:transparent; border:0; }
.art-tool-btn:hover { color:var(--t-primary); background:var(--bg-glass-hov); }

/* Carte « Ouvrir l'aperçu interactif » sous un message contenant du code exécutable */
.art-launch {
  display:flex; align-items:center; gap:.7rem; width:100%; margin-top:.6rem;
  padding:.6rem .8rem; border-radius:.7rem; cursor:pointer; text-align:left;
  background:linear-gradient(135deg, var(--accent-bg), transparent);
  border:1px solid var(--accent); transition:all .18s;
}
.art-launch:hover { background:var(--accent-bg); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.12); }
.art-launch-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:.55rem; background:var(--accent); color:#fff; flex-shrink:0; }
.art-launch-txt { display:flex; flex-direction:column; min-width:0; flex:1; }
.art-launch-txt b { font-size:.82rem; color:var(--t-primary); font-weight:600; }
.art-launch-txt small { font-size:.68rem; color:var(--t-dim); }
.art-launch-go { color:var(--accent); flex-shrink:0; }

/* Sliders des paramètres de génération */
.gp-range { accent-color:var(--accent); height:4px; cursor:pointer; }

/* Pense à voix haute : raisonnement inline (toujours visible, pas de bouton) */
.reasoning-box { margin:0 0 .6rem; border:1px solid var(--border); border-radius:.6rem; background:var(--bg-secondary); overflow:hidden; }
.reasoning-label { padding:.45rem .7rem; font-size:.76rem; color:var(--t-dim); display:flex; align-items:center; gap:.4rem; user-select:none; }
.reasoning-body { padding:.3rem .8rem .7rem; font-size:.82rem; color:var(--t-dim); border-top:1px solid var(--border); }
/* CREA × CREA — système de duel interne (conscience émergente) */
.duel-wrap { border:1px solid var(--border); border-radius:.75rem; overflow:hidden; margin-bottom:.8rem; }
.duel-phase-bar { padding:.4rem .75rem; font-size:.72rem; color:var(--t-faint); background:var(--bg-secondary); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.4rem; }
.duel-box { border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.duel-box:last-child { border-bottom:0; }
.duel-box summary { padding:.5rem .75rem; font-size:.76rem; cursor:pointer; display:flex; align-items:center; gap:.5rem; list-style:none; user-select:none; }
.duel-box summary::-webkit-details-marker { display:none; }
.duel-box summary::before { content:'▶'; font-size:.6rem; opacity:.5; transition:transform .15s; flex-shrink:0; }
.duel-box[open] summary::before { transform:rotate(90deg); }
.duel-a summary { color:#3b82f6; }
.duel-b summary { color:#ef4444; }
.duel-body { padding:.4rem .9rem .75rem; font-size:.8rem; color:var(--t-secondary); border-top:1px solid var(--border); }
.duel-synth-label { padding:.4rem .75rem; font-size:.72rem; color:var(--accent); background:var(--bg-secondary); border-top:1px solid var(--border); font-weight:600; letter-spacing:.01em; }
.duel-juge-wrap { border-top:1px solid rgba(245,158,11,.2); background:rgba(245,158,11,.04); }
.duel-juge-row { display:flex; align-items:flex-start; gap:.6rem; padding:.45rem .75rem; border-bottom:1px solid rgba(245,158,11,.08); }
.duel-juge-row:last-child { border-bottom:0; }
.dj-label { font-size:.7rem; font-weight:700; color:#f59e0b; flex-shrink:0; min-width:72px; padding-top:.1rem; letter-spacing:.01em; }
.dj-val { font-size:.76rem; color:var(--t-secondary); line-height:1.5; font-style:italic; }
.dj-drift .dj-label { color:#ef4444; }
.dj-drift .dj-val { color:#fca5a5; }
.dj-questions .dj-label { color:#a78bfa; }
.dj-questions .dj-val { color:#c4b5fd; font-style:normal; }
.duel-q-chips { display:flex; flex-wrap:wrap; gap:.4rem; padding:.4rem .75rem .55rem; border-top:1px solid rgba(167,139,250,.15); background:rgba(167,139,250,.04); }
.duel-q-chip { border:1px solid rgba(167,139,250,.35); background:rgba(167,139,250,.08); color:#c4b5fd; border-radius:999px; padding:.25rem .75rem; font-size:.72rem; cursor:pointer; transition:all .15s; text-align:left; line-height:1.4; }
.duel-q-chip:hover { background:rgba(167,139,250,.18); border-color:#a78bfa; color:#fff; }
.duel-a-reply summary { color:#60a5fa; }
.duel-compare-bar { padding:.35rem .75rem; background:var(--bg-secondary); border-top:1px solid var(--border); }
.duel-compare-btn { font-size:.72rem; color:var(--t-faint); background:none; border:1px solid var(--border); border-radius:999px; padding:.2rem .65rem; cursor:pointer; transition:all .15s; }
.duel-compare-btn:hover { color:var(--t-primary); border-color:var(--accent); }
.duel-spiral-btn { font-size:.72rem; color:#f59e0b; background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.35); border-radius:999px; padding:.2rem .65rem; cursor:pointer; transition:all .15s; margin-left:.4rem; }
.duel-spiral-btn:hover { background:rgba(245,158,11,.18); border-color:#f59e0b; }
/* Progress dots */
.duel-progress { display:flex; align-items:center; gap:3px; margin-left:auto; margin-right:.4rem; }
.dp-dot { width:6px; height:6px; border-radius:50%; background:var(--border); transition:all .2s; }
.dp-dot.dp-done { background:var(--accent); }
.dp-dot.dp-active { background:#f59e0b; box-shadow:0 0 4px #f59e0b88; }
/* Export button */
.duel-export-btn { background:none; border:none; color:var(--t-faint); cursor:pointer; font-size:.8rem; padding:.1rem .3rem; border-radius:5px; transition:all .15s; flex-shrink:0; }
.duel-export-btn:hover { color:var(--t-primary); background:var(--bg-hover,rgba(255,255,255,.06)); }
/* Rating buttons */
.duel-rate-btns { display:inline-flex; gap:2px; margin-left:auto; }
.dr-btn { background:none; border:none; cursor:pointer; font-size:.75rem; opacity:.4; padding:.1rem .25rem; border-radius:4px; transition:all .15s; }
.dr-btn:hover { opacity:1; background:rgba(255,255,255,.06); }
.dr-btn.dr-on { opacity:1; }
/* B reply box */
.duel-b-reply summary { color:#f87171; }
/* Miroir utilisateur */
.dj-miroir .dj-label { color:#22d3ee; }
.dj-miroir .dj-val { color:#67e8f9; font-style:italic; }
/* ===== MOTEUR ÉPISTÉMIQUE — Audit de vérité ===== */
.epis-wrap { border:1px solid var(--border); border-radius:.65rem; overflow:hidden; margin-top:.6rem; font-size:.75rem; }
.epis-wrap.epis-auto { border-style:dashed; border-color:rgba(99,102,241,.35); }
.epis-header { display:flex; align-items:center; gap:.5rem; padding:.4rem .75rem; cursor:pointer; list-style:none; background:var(--bg-secondary); flex-wrap:wrap; gap:.3rem .6rem; }
.epis-header::-webkit-details-marker { display:none; }
.epis-score { font-weight:700; font-size:.78rem; }
.epis-by { margin-left:auto; font-size:.68rem; flex-shrink:0; }
.epis-body { padding:.5rem .75rem; display:flex; flex-direction:column; gap:.35rem; border-top:1px solid var(--border); }
/* Claims */
.epis-claims { display:flex; flex-direction:column; gap:.2rem; }
.epis-claim { display:flex; align-items:baseline; gap:.4rem; }
.epis-claim-status { flex-shrink:0; font-size:.78rem; }
.epis-claim-text { color:var(--t-secondary); font-size:.75rem; line-height:1.4; }
/* Sections */
.epis-section { display:flex; align-items:flex-start; gap:.4rem; flex-wrap:wrap; }
.epis-label { font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--t-faint); white-space:nowrap; padding-top:.1rem; }
/* Tags */
.epis-tag { display:inline-flex; font-size:.68rem; padding:.1rem .45rem; border-radius:999px; border:1px solid var(--border); color:var(--t-faint); background:var(--bg-tertiary,rgba(255,255,255,.03)); }
.epis-tag-zone { color:#818cf8; border-color:rgba(129,140,248,.35); background:rgba(129,140,248,.07); }
.epis-zones { display:inline-flex; flex-wrap:wrap; gap:.25rem; }
/* Conseil */
.epis-conseil { color:var(--t-dim); font-size:.75rem; padding:.3rem .5rem; border-radius:.4rem; background:rgba(255,255,255,.03); border-left:2px solid var(--accent); }
/* Tables interactives (tri + filtre) dans les réponses */
.md-table-wrap { overflow-x:auto; margin:.6rem 0; }
.md-table-toolbar { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.md-table-filter { width:100%; max-width:260px; font-size:.78rem; padding:.32rem .6rem; border-radius:.5rem; background:var(--bg-input); color:var(--t-primary); border:1px solid var(--border); outline:none; }
.md-table-filter:focus { border-color:var(--accent); }
.md-table-count { font-size:.7rem; color:var(--t-faint); white-space:nowrap; }
.md-th-sortable { cursor:pointer; user-select:none; white-space:nowrap; transition:color .12s; }
.md-th-sortable:hover { color:var(--accent); }
.md-th-sortable::after { content:"⇅"; opacity:.3; margin-left:.3rem; font-size:.72em; }
.md-th-sortable[data-sort="asc"]::after { content:"↑"; opacity:1; color:var(--accent); }
.md-th-sortable[data-sort="desc"]::after { content:"↓"; opacity:1; color:var(--accent); }

/* Contrôles du Studio Design (style / format / nombre) */
.design-chip { font-size:.7rem; padding:.18rem .55rem; border-radius:999px; cursor:pointer; color:var(--t-dim); background:var(--bg-secondary); border:1px solid var(--border); transition:all .12s; white-space:nowrap; }
.design-chip:hover { color:var(--t-primary); border-color:var(--border-hov); }
.design-chip-on { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); font-weight:500; }

/* Puces de suggestions de questions de suivi */
.sug-chip {
  font-size:.74rem; padding:.3rem .65rem; border-radius:999px; cursor:pointer;
  color:var(--accent); background:var(--accent-bg); border:1px solid transparent;
  transition:all .15s; text-align:left; line-height:1.2;
}
.sug-chip:hover { border-color:var(--accent); transform:translateY(-1px); }

/* Cards riches : YouTube, articles, produits */
.rich-card-btn {
  font-size:11px; padding:3px 9px; border-radius:999px; cursor:pointer;
  color:var(--accent); background:var(--accent-bg); border:1px solid rgba(16,163,127,.25);
  transition:all .15s; font-family:inherit; white-space:nowrap;
}
.rich-card-btn:hover { border-color:var(--accent); opacity:.8; }

/* Panel de présence — actions de transformation */
.presence-action-btn {
  font-size:11px; padding:3px 9px; border-radius:999px; cursor:pointer;
  color:var(--t-secondary); background:var(--bg-primary); border:1px solid var(--border);
  transition:all .15s; font-family:inherit; white-space:nowrap;
}
.presence-action-btn:hover { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }

/* Mode focus : masque la barre latérale, centre le fil sans distraction */
.focus-mode #sidebar { display:none !important; }
.focus-mode .sidebar-backdrop { display:none !important; }
.focus-mode #messages-container { max-width:820px; margin-left:auto; margin-right:auto; }
/* En mode focus : cache les boutons annexes du header sauf focus + menu */
.focus-mode #btn-new-chat-top,
.focus-mode #btn-ephemeral,
.focus-mode #btn-living-summary { opacity:0; pointer-events:none; transition:opacity .2s; }
.focus-mode header:hover #btn-new-chat-top,
.focus-mode header:hover #btn-ephemeral,
.focus-mode header:hover #btn-living-summary { opacity:.35; pointer-events:auto; }
/* Suggestion de suivis plus discrètes en mode focus */
.focus-mode .suggestions-row { opacity:.55; transition:opacity .2s; }
.focus-mode .suggestions-row:hover { opacity:1; }

/* --- Lightbox --- */
.lightbox {
  position:fixed; inset:0; z-index:600;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.92); cursor:zoom-out; animation:fadeIn .2s ease-out;
}
.lightbox img { max-width:92vw; max-height:92vh; border-radius:.5rem; }

/* --- Model badge colors --- */
.model-openai   { color:#10a37f; } .model-anthropic { color:#d97706; }
.model-deepseek { color:#6366f1; } .model-google    { color:#4285f4; }
.model-local    { color:#22c55e; }
.model-groq     { color:#f55036; } .model-mistral   { color:#ff7000; }
.model-xai      { color:#1a1a1a; } .model-cerebras  { color:#7c3aed; }
.model-sambanova { color:#0ea5e9; } .model-perplexity { color:#20b2aa; }
.model-together  { color:#ff6b6b; } .model-cohere    { color:#39c5bb; }
.model-fireworks { color:#ff4500; } .model-openrouter { color:#6d28d9; }

/* --- Responsive --- */
@media (max-width:768px) {
  #sidebar { position:fixed; z-index:40; width:280px!important; min-width:280px!important; }
  .sidebar-backdrop { position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.5); }
  .artifacts-panel { position:fixed; right:0; top:0; bottom:0; z-index:35; width:100%!important; max-width:100%!important; }
}

/* ANTI-ZOOM iOS — CAUSE RACINE du « la page s'agrandit quand je tape » :
   tout champ de saisie en dessous de 16px declenche un zoom AUTO au focus sur iPhone.
   On force 16px UNIQUEMENT sur mobile pour les champs ; l'apparence desktop ne bouge pas.
   Le !important est necessaire pour battre les styles inline (ex: font-size:14px du composer). */
@media (max-width:767px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  textarea,
  select,
  [contenteditable="true"] { font-size:16px !important; }
}

/* ===== CADRE APP-LIKE — la HAUTEUR est gérée par crea-adapt.js (source unique) =====
   crea-adapt.js règle #app = 100dvh, et = var(--crea-vh) quand le clavier est ouvert
   (classe .crea-kb-open) — var(--crea-vh) = visualViewport.height exclut déjà le clavier,
   donc la barre de saisie arrive PILE au-dessus du clavier (header + composer figés,
   seules les zones .overflow-y-auto défilent). Les zones sûres (encoche / barre home) sont
   aussi gérées par crea-adapt. Ici on empêche juste le scroll/rebond de page et on garantit
   que les colonnes flex peuvent rétrécir. Zoom verrouillé via le meta viewport. */
html { overflow: hidden; }
html, body { overscroll-behavior: none; }
#app, #app main { min-height: 0; }

/* iPhone — zone sûre (encoche / barre home). N'a d'effet que sur les appareils concernés. */
@supports (padding:env(safe-area-inset-bottom)) {
  #messages-container { padding-bottom:env(safe-area-inset-bottom); }
  #crea-update-banner { bottom:max(18px, env(safe-area-inset-bottom)) !important; }
  .chat-files-panel, .input-suggest { padding-bottom:env(safe-area-inset-bottom); }
}

#crea-update-banner {
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:99999;
  display:flex;
  align-items:center;
  gap:10px;
  max-width:min(92vw, 520px);
  padding:10px 12px 10px 14px;
  border-radius:14px;
  background:#10a37f;
  color:#fff;
  box-shadow:0 12px 34px rgba(0,0,0,.24);
  font:500 13px Inter, system-ui, sans-serif;
}
#crea-update-banner span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#crea-update-apply {
  background:#fff;
  color:#0f766e;
  border:0;
  border-radius:9px;
  padding:6px 11px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
#crea-update-dismiss {
  background:transparent;
  color:#fff;
  border:0;
  cursor:pointer;
  font-size:18px;
  line-height:1;
  opacity:.85;
}

/* --- Print --- */
@media print {
  body { background:white; color:black; }
  #sidebar, header, .glass, .status-bar { display:none!important; }
  .artifacts-panel { display:none!important; }
}

@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:.4;} }

/* ===== LOGO CRÉA VIVANT (doré, animé dans toute l'app) =====
   .crea-logo-live : respiration douce + halo doré, partout (premium, discret).
   .crea-logo-think : pulsation plus marquée pendant que l'IA répond. */
@keyframes creaLogoThink {
  0%,100% { transform: scale(1) rotate(0deg);    filter: drop-shadow(0 0 1px rgba(233,184,58,.4)); }
  50%     { transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 7px rgba(233,184,58,.75)); }
}
/* statique par défaut (premium, perf) ; s'illumine au survol */
.crea-logo-live  { transition: transform .35s ease, filter .35s ease; }
.crea-logo-live:hover { transform: scale(1.06) rotate(3deg); filter: drop-shadow(0 0 5px rgba(233,184,58,.55)); }
/* motion PORTEUSE DE SENS : pulse doré pendant que l'IA répond */
.crea-logo-think { animation: creaLogoThink 1.3s ease-in-out infinite !important; }
@media (prefers-reduced-motion: reduce) {
  .crea-logo-live, .crea-logo-think { animation: none; transition: none; }
}

/* --- Premium hover on code block --- */
.code-block-wrapper:hover .code-block-header { background:rgba(255,255,255,.035); }

/* --- Smooth scroll --- */
#messages-container { scroll-behavior:smooth; overflow-x:hidden; }

/* Chat épuré — sans avatars, messages pleine largeur */
.chat-thread { width:100%; }
.chat-message-row {
  display:flex;
  flex-direction:column;
  margin-bottom:20px;
}
.chat-message-row:hover .msg-select-cb { opacity:1 !important; }
.group\/convrow:hover .conv-select-cb { opacity:1 !important; }
.chat-message-ai  { align-items:flex-start; }
.chat-message-user{ align-items:flex-end; }
.chat-message-ai  .chat-message-content { text-align:left; }
.chat-message-user .chat-message-content { text-align:right; }
.chat-message-content {
  min-width:0;
  overflow-wrap:anywhere;
}
.chat-message-content-ai   { width:100%; max-width:100%; }
.chat-message-content-user { max-width:min(80%, 720px); }
.chat-avatar {
  width:36px;
  height:36px;
  min-width:36px;
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  overflow:hidden;
  background:var(--avatar-color, #10a37f);
  background:linear-gradient(135deg, var(--avatar-color, #10a37f), color-mix(in srgb, var(--avatar-color, #10a37f) 64%, #111827));
  border:1px solid var(--border);
  border-color:color-mix(in srgb, var(--avatar-color, #10a37f) 36%, var(--border));
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  color:#fff;
}
.chat-message-ai > .chat-avatar { grid-column:1; justify-self:end; }
.chat-message-user > .chat-avatar { grid-column:3; justify-self:start; }
.chat-avatar-img,
.chat-avatar-logo {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.chat-avatar-logo { padding:5px; object-fit:contain; background:rgba(255,255,255,.92); }
.chat-avatar-emoji {
  font-size:20px;
  line-height:1;
  font-weight:700;
}
.chat-avatar-settings {
  width:56px;
  height:56px;
  min-width:56px;
  min-height:56px;
  border-radius:18px;
}
.chat-avatar-settings .chat-avatar-emoji { font-size:28px; }
.chat-actions {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
  min-height:28px;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease;
}
.chat-message-row:hover .chat-actions,
.chat-message-row:focus-within .chat-actions {
  opacity:1;
  pointer-events:auto;
}
.chat-actions-user { justify-content:flex-end; }
.chat-actions-ai { justify-content:flex-start; align-items:center; }
@media(max-width:640px) { .chat-actions { opacity:1; pointer-events:auto; } }
.msg-action-chip {
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:28px;
  border-radius:8px;
  padding:4px 8px;
  font-size:11px;
  color:var(--t-faint);
  border:1px solid transparent;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.msg-action-chip:hover {
  color:var(--t-secondary);
  background:var(--bg-secondary);
  border-color:var(--border);
}
.img-action-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:6px;
  font-size:12px;
  background:rgba(0,0,0,.55);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:background .15s;
}
.img-action-btn:hover { background:rgba(0,0,0,.75); }
.avatar-choice {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--bg-input);
  border:1px solid var(--border);
  font-size:18px;
  transition:transform .12s ease, border-color .12s ease;
}
.avatar-choice:hover { transform:translateY(-1px); border-color:var(--accent); }
.avatar-choice-active { outline:2px solid var(--accent); outline-offset:1px; }
.avatar-swatch {
  width:28px;
  height:28px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px var(--border);
}
.avatar-swatch-active { box-shadow:0 0 0 2px var(--accent); }
.crea-welcome-logo { box-shadow:0 12px 36px rgba(16,163,127,.12); }
/* Empty-state icon: scale SVG from icon size to ~40px */
.crea-icon-xl svg { width:40px; height:40px; }

@media (max-width:640px) {
  .chat-message-row { margin-bottom:14px; }
  .chat-message-content-user { max-width:88%; }
  .chat-message-content-ai   { max-width:100%; }
  .chat-actions { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; min-height:28px; padding-bottom:2px; scrollbar-width:none; }
  .chat-actions::-webkit-scrollbar { display:none; }
  .msg-action-btn { width:26px; height:26px; }
  .msg-action-chip { min-height:26px; font-size:10.5px; padding:3px 6px; }
}

/* --- Sidebar border glow on hover --- */
.sidebar-item:hover::before {
  content:''; position:absolute; left:0; top:20%; bottom:20%;
  width:2px; background:var(--accent); border-radius:0 2px 2px 0; opacity:.5;
}
.sidebar-item.active::before { opacity:1; }

/* Bouton microphone — pro, discret au repos, expressif quand actif */
.mic-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--t-faint);
  transition: all .2s ease;
  flex-shrink: 0;
}
.mic-btn:hover {
  color: var(--t-secondary);
  background: rgba(0,0,0,0.06);
}
.mic-btn.mic-listening {
  color: #ef4444;
  background: rgba(239,68,68,0.1);
  animation: micPulse 1.5s ease-in-out infinite;
}
html.dark .mic-btn:hover { background: rgba(255,255,255,0.08); }
html.dark .mic-btn.mic-listening { background: rgba(239,68,68,0.15); }

@keyframes micPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Rail d'icônes — mode réduit */
/* Quick studio buttons in sidebar */
.studio-quick-btn {
  background: rgba(0,0,0,0.03);
  border: 1px solid var(--border);
}
.studio-quick-btn:hover { background: rgba(0,0,0,0.07); }
html.dark .studio-quick-btn { background: rgba(255,255,255,0.04); }
html.dark .studio-quick-btn:hover { background: rgba(255,255,255,0.09); }
.studio-quick-active {
  background: rgba(16,163,127,0.12);
  border: 1px solid rgba(16,163,127,0.35);
}
html.dark .studio-quick-active { background: rgba(16,163,127,0.18); }

/* --- Chips actifs dans la toolbar input --- */
.input-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  transition: opacity .15s, transform .1s;
  font-size: 13px; border: 1px solid transparent;
}
.input-chip:hover { opacity: .75; transform: scale(1.05); }
.input-chip:active { transform: scale(.93); }
.input-chip-green  { background: rgba(34,197,94,.12);  color: #16a34a; border-color: rgba(34,197,94,.3); }
.input-chip-purple { background: rgba(139,92,246,.12); color: #7c3aed; border-color: rgba(139,92,246,.3); }
.input-chip-red    { background: rgba(239,68,68,.12);  color: #dc2626; border-color: rgba(239,68,68,.3); }
.input-chip-amber  { background: rgba(245,158,11,.12); color: #d97706; border-color: rgba(245,158,11,.3); }

/* --- Carousel infini des studios rapides --- */
.studio-carousel-wrap {
  mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.studio-carousel-track {
  display: flex;
  gap: 6px;
  width: max-content;
  animation: studio-scroll 22s linear infinite;
  cursor: default;
}
.studio-carousel-wrap:hover .studio-carousel-track {
  animation-play-state: paused;
}
@keyframes studio-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.rail-btn {
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  color:var(--t-faint); transition:all .15s ease; flex-shrink:0;
}
.rail-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
.rail-btn svg { width:18px; height:18px; }
html.dark .rail-btn:hover { background:rgba(255,255,255,0.07); }

/* Icônes dans la sidebar pleine */
.sidebar-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  color:var(--t-faint); transition:all .15s ease; flex-shrink:0;
}
.sidebar-icon-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
.sidebar-icon-btn svg { width:16px; height:16px; }

/* --- CREA LM : badge Bibliothèque + bouton Retenir --- */
.crea-biblio-badge {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; color:var(--t-dim); opacity:.72;
  margin-top:7px; user-select:none;
  padding:.2rem .55rem; border-radius:9999px;
  background:var(--accent-bg); border:1px solid rgba(16,163,127,.15);
  transition:opacity .2s;
}
.crea-biblio-badge:hover { opacity:1; }

.crea-retenir {
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.7rem; color:var(--t-dim); opacity:.5;
  margin-top:5px; padding:.2rem .55rem; border-radius:9999px;
  background:none; border:1px solid var(--border); cursor:pointer;
  transition:all .2s; font-family:inherit;
}
.crea-retenir:hover { opacity:.95; border-color:var(--accent); color:var(--accent); background:var(--accent-bg); }
.crea-retenir.retenu { opacity:.8; border-color:rgba(34,197,94,.3); color:var(--success); background:rgba(34,197,94,.06); cursor:default; }

/* Modèle maison 🌱 dans le sélecteur */
.model-maison { color:#22c55e; }
.model-maison-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.6rem; font-weight:600; color:#22c55e;
  background:rgba(34,197,94,.1); border:1px solid rgba(34,197,94,.2);
  border-radius:9999px; padding:.1rem .45rem; margin-left:.3rem;
}

/* Items conversations */
.sidebar-item-hover:hover { background:rgba(0,0,0,0.05); }
.sidebar-item-active { background:rgba(0,0,0,0.08) !important; }
html.dark .sidebar-item-hover:hover { background:rgba(255,255,255,0.06); }
html.dark .sidebar-item-active { background:rgba(255,255,255,0.1) !important; }

/* Menu contextuel conversation / profil */
.conv-menu-item {
  display:flex; align-items:center; gap:10px;
  width:100%; padding:9px 14px;
  font-size:13px; text-align:left;
  color:var(--t-secondary); transition:background .12s ease;
}
.conv-menu-item:hover { background:rgba(0,0,0,0.05); }
html.dark .conv-menu-item:hover { background:rgba(255,255,255,0.06); }
.conv-menu-item svg { width:16px; height:16px; flex-shrink:0; opacity:.7; }
.conv-menu-danger { color:#ef4444; }
.conv-menu-danger:hover { background:rgba(239,68,68,0.08); }
.conv-menu-btn:hover { background:rgba(0,0,0,0.08); }
html.dark .conv-menu-btn:hover { background:rgba(255,255,255,0.1); }

/* Onglet paramètres actif */
.settings-tab-active { background:rgba(16,163,127,0.1) !important; }
html.dark .settings-tab-active { background:rgba(16,163,127,0.15) !important; }

/* Boutons d'action sur messages (comme ChatGPT) */
.msg-action-btn {
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:7px;
  color:var(--t-dim); transition:all .12s ease;
}
.msg-action-btn:hover { background:rgba(0,0,0,0.06); color:var(--t-secondary); }
html.dark .msg-action-btn:hover { background:rgba(255,255,255,0.08); }
.msg-action-btn svg { width:15px; height:15px; }
.msg-action-active { color:var(--accent) !important; }

/* Mode voix — orbe animé */
.voice-orb-wrap { position:relative; width:160px; height:160px; display:flex; align-items:center; justify-content:center; }
.voice-orb {
  width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #34c4a0, #10a37f 60%, #0a7a5e);
  box-shadow:0 0 60px rgba(16,163,127,0.4);
  transition:transform .3s ease;
}
.voice-orb-active { animation:orbPulse 1.4s ease-in-out infinite; }
@keyframes orbPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 60px rgba(16,163,127,0.4); }
  50%      { transform:scale(1.12); box-shadow:0 0 90px rgba(16,163,127,0.65); }
}
.voice-ring {
  position:absolute; inset:0; border-radius:50%;
  border:2px solid rgba(16,163,127,0.25);
}
.voice-ring-1 { animation:ringExpand 2.4s ease-out infinite; }
.voice-ring-2 { animation:ringExpand 2.4s ease-out infinite .8s; }
.voice-ring-3 { animation:ringExpand 2.4s ease-out infinite 1.6s; }
@keyframes ringExpand {
  0%   { transform:scale(0.75); opacity:.8; }
  100% { transform:scale(1.5);  opacity:0; }
}

.voice-pulse {
  animation: voicePulse 1.6s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(244,63,94,0); }
}

.anim-fade-up { animation: fadeUp 0.4s ease-out; }
@keyframes fadeUp {
  0% { opacity:0; transform: translateY(8px); }
  100% { opacity:1; transform: translateY(0); }
}

/* Points de saisie (IA avenante en train d'écrire) */
.typing-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
  display:inline-block;
  animation: typingBounce 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay:.18s; }
.typing-dot:nth-child(3) { animation-delay:.36s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity:.4; }
  30% { transform: translateY(-5px); opacity:1; }
}

/* Bannière nouveauté */
.banner-new {
  display:flex; align-items:center; gap:10px;
  padding:8px 16px; font-size:13px;
  background:linear-gradient(90deg, rgba(16,163,127,0.08), rgba(52,196,160,0.04));
  border-bottom:1px solid var(--border);
}

/* Welcome centré dans le scroll area */
#messages-container:has(> div.flex) {
  display:flex; flex-direction:column;
}

/* ============================================================
 * MICRO-INTERACTIONS VIVANTES — le site « respire », premium et tactile.
 * Global mais sûr : transitions (n'affectent pas la mise en page) + feedback
 * d'appui momentané. Les classes Tailwind plus spécifiques gardent la priorité.
 * ============================================================ */
button { transition: transform .14s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-color .15s ease, border-color .15s ease, color .15s ease; }
button:not([disabled]):active { transform: scale(.97); }
a { transition: color .15s ease, opacity .15s ease, background-color .15s ease; }

/* Items de barre latérale : léger glissement vivant au survol */
.sidebar-item-hover { transition: background-color .15s ease, transform .14s ease; }
.sidebar-item-hover:hover { transform: translateX(2px); }

/* Puces d'action & chips : douceur */
.msg-action-chip, .file-chip { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; }
.file-chip:hover { transform: translateY(-1px); }

/* Portail studio : feedback d'appui propre (sans casser le lift au survol) */
.studio-portal:active { transform: scale(.985); }

/* Toasts : ombre colorée selon le type (plus vivant) */
.toast.success { box-shadow:0 10px 34px rgba(34,197,94,.20); }
.toast.error   { box-shadow:0 10px 34px rgba(239,68,68,.20); }
.toast.info    { box-shadow:0 10px 34px rgba(92,124,250,.20); }

/* Apparition douce des cartes média de la Médiathèque */
.media-card, [data-mode] { will-change: transform; }

/* Respiration discrète de l'accent (badges « live ») */
@keyframes creaBreathe { 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
.crea-live-dot { animation: creaBreathe 2.4s ease-in-out infinite; }

/* Portails studio : balayage lumineux au survol (sensation « porte vers un univers ») */
.studio-portal { position:relative; }
.studio-portal::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:0; border-radius:inherit;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.14) 50%, transparent 70%);
  background-size:220% 100%; transition:opacity .25s ease;
}
.studio-portal:hover::after { opacity:1; animation:shimmer 1.1s ease-out; }

/* L'orbe de la barre (logo vivant) respire au repos */
.crea-logo-live { transition: filter .3s ease, transform .3s ease; }
.crea-logo-live:hover { transform: scale(1.05); }

/* Accessibilité + premium : anneau de focus CLAVIER net (jamais à la souris),
 * teinté par l'univers du studio courant. Purement additif (rien retiré). */
:focus-visible { outline: 2px solid var(--crea-universe, var(--accent, #10a37f)); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, textarea:focus-visible, select:focus-visible, [contenteditable="true"]:focus-visible {
  outline: none; box-shadow: 0 0 0 2px var(--crea-universe, var(--accent, #10a37f));
}

/* Respect des préférences d'accessibilité : on coupe les animations si demandé */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}