/* Luna - Main Stylesheet */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0a0a10;
  --bg-subtle: #0e0e18;
  --surface: #12121e;
  --surface2: #1a1a2e;
  --surface3: #22223a;
  --border: #2a2a44;
  --border-glow: rgba(155, 126, 255, 0.15);
  --text: #e4e4f0;
  --text-dim: #7878a0;
  --text-faint: #4e4e6a;
  --accent: #8b6cff;
  --accent-glow: #a78bff;
  --accent-soft: rgba(139, 108, 255, 0.08);
  --moon: #c9b8ff;
  --moon-glow: rgba(201, 184, 255, 0.12);
  --user-bubble: #1e1e38;
  --ai-bubble: #141428;
  --danger: #ff5c7c;
  --success: #4ecd82;
  --radius: 14px;
  --header-h: 56px;
  --emotion-rgb: 139,108,255;
  --toggle-active-bg: rgba(139, 108, 255, 0.22);
  --toggle-active-shadow: var(--accent);
}

/* ---- Light Theme ---- */
body.light-theme {
  --bg:           #f5f5fa;
  --bg-subtle:    #eeeef5;
  --surface:      #ffffff;
  --surface2:     #eeeef5;
  --surface3:     #e5e5f0;
  --border:       #d0d0e0;
  --border-glow:  rgba(139, 108, 255, 0.15);
  --text:         #18182a;
  --text-dim:     #5a5a80;
  --text-faint:   #9090b0;
  --user-bubble:  #ece8ff;
  --ai-bubble:    #f5f3ff;
  --accent:       #7055e0;
  --accent-glow:  #8b6cff;
  --accent-soft:  rgba(112, 85, 224, 0.08);
  --moon:         #7055e0;
  --moon-glow:    rgba(112, 85, 224, 0.10);
  --danger:       #e04060;
  --success:      #2ea860;
  --toggle-active-bg: rgba(112, 85, 224, 0.15);
  --toggle-active-shadow: var(--accent);
}

body.light-theme::before {
  background: radial-gradient(circle, rgba(112, 85, 224, 0.06) 0%, transparent 70%);
}

body.light-theme::after {
  background: radial-gradient(circle, rgba(112, 85, 224, 0.04) 0%, transparent 70%);
}

body.light-theme .login-moon {
  box-shadow: 0 0 60px rgba(112, 85, 224, 0.15), 0 0 120px rgba(112, 85, 224, 0.06);
}

body.light-theme .msg.assistant .msg-text code {
  background: rgba(0, 0, 0, 0.06);
}

body.light-theme .msg.assistant .msg-text pre {
  background: rgba(0, 0, 0, 0.05);
}

body.light-theme #mobile-drawer {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

body.light-theme .drawer-row {
  border-bottom-color: rgba(208, 208, 224, 0.5);
}

body.light-theme .msg.user {
  border-color: rgba(112, 85, 224, 0.12);
}

/* Dark Luna channel overrides in light theme */
body.light-theme #chat-screen.dark-mode {
  --accent: #8a5a7a;
  --accent-glow: #a0708e;
  --accent-soft: rgba(138, 90, 122, 0.08);
  --moon: #8a5a7a;
  --user-bubble: #f5eef3;
  --ai-bubble: #faf5f8;
  --border-glow: rgba(138, 90, 122, 0.12);
  --border: #e0d0d8;
}

html { height: 100%; }

body {
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Atmospheric background */
body::before {
  content: '';
  position: fixed;
  top: -40%;
  right: -20%;
  width: 70vw;
  height: 70vw;
  max-width: 600px;
  max-height: 600px;
  background: radial-gradient(circle, rgba(139, 108, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -30%;
  left: -15%;
  width: 50vw;
  height: 50vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(circle, rgba(201, 184, 255, 0.03) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ============================================= */
/* =============== LOGIN SCREEN ================ */
/* ============================================= */

#login-screen {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ---- Login — panneau personnage (gauche) ---- */
.login-character-panel {
  flex: 1;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  min-width: 0;
}

.login-character-glow {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 60%;
  background: radial-gradient(ellipse, rgba(139, 108, 255, 0.18) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.login-portrait {
  position: relative;
  z-index: 2;
  height: 88%;
  max-height: 620px;
  width: auto;
  object-fit: contain;
  object-position: bottom center;
  /* Fondu radial : efface le fond gris aux bords, garde le personnage centré */
  mask-image: radial-gradient(ellipse 78% 92% at 50% 54%, black 42%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 78% 92% at 50% 54%, black 42%, transparent 100%);
  filter: drop-shadow(0 0 32px rgba(139, 108, 255, 0.35)) brightness(0.92);
  animation: lunaFloat 7s ease-in-out infinite;
}

@keyframes lunaFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* ---- Login — panneau formulaire (droite) ---- */
.login-form-panel {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 48px 40px;
  background: linear-gradient(to left, var(--bg) 55%, transparent 100%);
  position: relative;
  z-index: 3;
}

/* Mobile : colonne, portrait compact en haut */
@media (max-width: 640px) {
  #login-screen {
    flex-direction: column;
  }
  .login-character-panel {
    flex: 0 0 220px;
    align-items: center;
  }
  .login-portrait {
    height: 100%;
    max-height: 220px;
  }
  .login-form-panel {
    width: 100%;
    background: none;
    padding: 24px 28px 40px;
    gap: 14px;
  }
}

.login-moon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--moon) 0%, var(--accent) 50%, transparent 70%);
  box-shadow: 0 0 60px rgba(201, 184, 255, 0.2), 0 0 120px rgba(139, 108, 255, 0.08);
  margin-bottom: 8px;
  animation: moonFloat 6s ease-in-out infinite;
}

@keyframes moonFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

#login-screen h1 {
  font-family: 'Syne', sans-serif;
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--moon);
  letter-spacing: 8px;
  text-transform: uppercase;
}

#login-screen .login-sub {
  color: var(--text-dim);
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 2px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 280px;
  margin-top: 12px;
}

.login-form input {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 14px 18px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  font-family: 'Outfit', sans-serif;
  text-align: center;
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.login-form input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-form input::placeholder { color: var(--text-faint); }

.login-form button {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

.login-form button:hover { background: var(--accent-glow); }
.login-form button:active { transform: scale(0.98); }

#login-error {
  color: var(--danger);
  font-size: 0.82rem;
  display: none;
  text-align: center;
}

/* ============================================= */
/* =============== CHAT SCREEN ================= */
/* ============================================= */

#chat-screen {
  display: none;
  flex-direction: column;
  height: 100dvh;
  position: relative;
  z-index: 1;
}

/* ---- Header ---- */
#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---- Luna Identity (portrait + name + mood) ---- */
.luna-identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.portrait-wrap {
  position: relative;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

#portrait-img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  position: relative;
  z-index: 2;
  transition: opacity 0.25s ease;
  filter: drop-shadow(0 0 4px rgba(var(--emotion-rgb, 139,108,255), 0.4));
}

.portrait-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,108,255,0.3) 0%, transparent 70%);
  z-index: 1;
  animation: portraitPulse 3s ease-in-out infinite;
  transition: background 0.6s ease;
}

@keyframes portraitPulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.12); opacity: 1; }
}

.luna-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.header-luna {
  font-family: 'Syne', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--moon);
  letter-spacing: 3px;
  line-height: 1.2;
}

.luna-mood {
  font-size: 0.62rem;
  color: var(--text-faint);
  letter-spacing: 1px;
  text-transform: lowercase;
  font-weight: 400;
  transition: color 0.4s ease;
}

.luna-mood.mood-joyful { color: #ffd060; }
.luna-mood.mood-sad { color: #8898cc; }
.luna-mood.mood-angry { color: #e07070; }
.luna-mood.mood-surprised { color: #b8a8e8; }
.luna-mood.mood-curious { color: #60c890; }
.luna-mood.mood-playful { color: #e080b0; }
.luna-mood.mood-calm { color: #70b8d8; }
.luna-mood.mood-excited { color: #ffc840; }
.luna-mood.mood-frustrated { color: #c0a070; }
.luna-mood.mood-grateful { color: #e8a870; }
.luna-mood.mood-confused { color: #a0a088; }
.luna-mood.mood-loving { color: #e070a0; }

#model-badge {
  color: var(--text-faint);
  font-size: 0.62rem;
  background: var(--surface2);
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 400;
  letter-spacing: 0.3px;
  white-space: nowrap;
  align-self: center;
}

/* Desktop header actions */
.header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.header-right .user-info {
  color: var(--text-dim);
  font-size: 0.82rem;
  font-weight: 400;
  margin-right: 4px;
}

.hdr-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.78rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  transition: all 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hdr-btn:hover { border-color: var(--accent); color: var(--accent); }
.hdr-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Toggles situationnels : état actif nettement visible */
#btn-home.active,
#btn-working.active {
  background: var(--toggle-active-bg);
  border-color: var(--accent);
  color: var(--accent-glow);
  box-shadow: 0 0 0 1px var(--toggle-active-shadow);
  font-weight: 600;
}
.hdr-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.hdr-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Hamburger — mobile only */
#btn-menu {
  display: none;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.2s;
}

#btn-menu:hover { color: var(--text); }
#btn-menu svg { width: 22px; height: 22px; fill: currentColor; }

/* ============================================= */
/* ============== MOBILE DRAWER ================ */
/* ============================================= */

#mobile-drawer {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  z-index: 18;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: drawerSlide 0.25s ease;
}

#mobile-drawer.open { display: flex; }

@keyframes drawerSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

.drawer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(42, 42, 68, 0.5);
}

.drawer-row:last-child { border-bottom: none; }

.drawer-label {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 400;
}

.drawer-value {
  font-size: 0.82rem;
  color: var(--text);
}

.drawer-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-family: 'Outfit', sans-serif;
  transition: all 0.2s;
}

.drawer-btn:hover { border-color: var(--accent); color: var(--accent); }
.drawer-btn.active { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

#drawer-home.active,
#drawer-working.active {
  background: var(--toggle-active-bg);
  border-color: var(--accent);
  color: var(--accent-glow);
  box-shadow: 0 0 0 1px var(--toggle-active-shadow);
  font-weight: 600;
}
.drawer-btn.danger { color: var(--text-dim); }
.drawer-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

/* Drawer backdrop */
#drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-h);
  background: rgba(0, 0, 0, 0.4);
  z-index: 17;
}

#drawer-backdrop.open { display: block; }

/* ============================================= */
/* ============= SETTINGS PANEL ================ */
/* ============================================= */

#settings-panel {
  display: none;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 16px 20px;
  z-index: 15;
}

#settings-panel.open { display: block; }

#settings-panel h3 {
  font-size: 0.85rem;
  color: var(--accent-glow);
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.settings-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.settings-field label {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.settings-field select,
.settings-field input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  outline: none;
  min-width: 180px;
  transition: border-color 0.2s;
}

.settings-field select:focus,
.settings-field input:focus { border-color: var(--accent); }

#btn-apply-llm {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  cursor: pointer;
  height: 38px;
  transition: background 0.2s;
}

#btn-apply-llm:hover { background: var(--accent-glow); }
#btn-apply-llm:disabled { opacity: 0.4; cursor: not-allowed; }

#settings-status {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 8px;
}

#settings-status.success { color: var(--success); }
#settings-status.error { color: var(--danger); }

/* ============================================= */
/* ================ TAB BAR =================== */
/* ============================================= */

#tab-bar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  min-height: 38px;
  z-index: 15;
}

#tab-bar .tab {
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

#tab-bar .tab:hover { color: var(--text); }

#tab-bar .tab.active {
  color: var(--accent-glow);
  border-bottom-color: var(--accent);
}

#tab-bar .tab[data-channel="dark"].active {
  color: #c49eb8;
  border-bottom-color: #8a5a7a;
}

/* ============================================= */
/* ============ DARK MODE THEME ================ */
/* ============================================= */

#chat-screen.dark-mode {
  --accent: #8a5a7a;
  --accent-glow: #c49eb8;
  --accent-soft: rgba(138, 90, 122, 0.1);
  --moon: #d4b0c8;
  --user-bubble: #1e1520;
  --ai-bubble: #140e16;
  --border-glow: rgba(138, 90, 122, 0.15);
  --border: #2a2038;
}

#chat-screen.dark-mode #tab-bar {
  background: var(--bg-subtle);
}

#chat-screen.dark-mode .header-luna {
  color: var(--moon);
}

#chat-screen.dark-mode .portrait-glow {
  background: radial-gradient(circle, rgba(138, 90, 122, 0.3) 0%, transparent 70%);
}

/* Dark avatar in messages */
.dark-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8a5a7a, #5a3050);
  color: #d4b0c8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Syne', sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ============================================= */
/* ========= DARK PROMPT MODAL ================ */
/* ============================================= */

#dark-prompt-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 55;
  backdrop-filter: blur(4px);
}

#dark-prompt-backdrop.open { display: block; }

#dark-prompt-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  z-index: 56;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(138, 90, 122, 0.1);
  animation: purgeIn 0.25s ease;
}

#dark-prompt-modal.open { display: flex; }

/* ============================================= */
/* ================ CHAT MAIN ================= */
/* ============================================= */

#chat-main {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
}

#chat-main .chat-col {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ============================================= */
/* ============= PORTRAIT PANEL (VN) =========== */
/* ============================================= */

#portrait-panel {
  width: 220px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: linear-gradient(to right, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, var(--surface)) 100%);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Lueur ambiante derrière le personnage — couleur synchro avec émotion */
#portrait-panel-glow {
  position: absolute;
  bottom: 15%;
  left: 50%;
  transform: translateX(-50%);
  width: 180%;
  height: 65%;
  background: radial-gradient(ellipse, rgba(var(--emotion-rgb, 139,108,255), 0.13) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transition: background 1s ease;
}

/* Personnage — remplit la hauteur du panel, légèrement rogné sur les côtés (VN style) */
#portrait-panel-img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 68px;       /* au-dessus du nameplate */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;  /* tête visible, pieds en bas */
  /* Fondu en bas pour fondre les pieds dans le nameplate, haut net */
  mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 80%, transparent 100%);
  filter: drop-shadow(0 0 28px rgba(var(--emotion-rgb, 139,108,255), 0.35))
          drop-shadow(0 2px 8px rgba(0,0,0,0.7));
  animation: lunaFloat 7s ease-in-out infinite;
  transition: opacity 0.3s ease;
  z-index: 2;
}

/* Nameplate — nom + émotion en bas du panel */
#portrait-panel-nameplate {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: 14px 12px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(to top, var(--surface) 45%, transparent 100%);
  border-top: 1px solid rgba(139,108,255,0.08);
}

/* Ligne décorative au-dessus du nameplate */
#portrait-panel-nameplate::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(var(--emotion-rgb, 139,108,255), 0.4), transparent);
  transition: background 0.8s ease;
}

.pp-name {
  font-family: 'Syne', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--moon);
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1;
}

.pp-mood {
  font-size: 0.6rem;
  color: var(--text-faint);
  letter-spacing: 2px;
  text-transform: lowercase;
  transition: color 0.5s ease;
}

/* Couleurs émotion — réutilise les mêmes classes que .luna-mood */
.pp-mood.mood-joyful   { color: #ffd060; }
.pp-mood.mood-sad      { color: #8898cc; }
.pp-mood.mood-curious  { color: #60c890; }
.pp-mood.mood-playful  { color: #e080b0; }
.pp-mood.mood-calm     { color: #70b8d8; }
.pp-mood.mood-excited  { color: #ffc840; }
.pp-mood.mood-grateful { color: #e8a870; }
.pp-mood.mood-loving   { color: #e070a0; }
.pp-mood.mood-proud    { color: #c8a8f8; }
.pp-mood.mood-sarcastic   { color: #a0c870; }
.pp-mood.mood-flirty   { color: #f098b8; }
.pp-mood.mood-competitive { color: #ff8860; }
.pp-mood.mood-amused   { color: #f8c840; }
.pp-mood.mood-confident   { color: #d8b8f8; }
.pp-mood.mood-mischievous { color: #c080e8; }
.pp-mood.mood-dreamy   { color: #98b8f8; }
.pp-mood.mood-annoyed  { color: #e09060; }
.pp-mood.mood-tender   { color: #f0a8c8; }
.pp-mood.mood-surprised   { color: #b8a8e8; }

/* Desktop : masque le petit portrait circle dans le header */
@media (min-width: 641px) {
  .portrait-wrap { display: none; }
}

/* ============================================= */
/* ======= PORTRAIT MOBILE (petit carré) ======= */
/* ============================================= */

/* Caché sur desktop */
#portrait-mobile { display: none; }

@media (max-width: 640px) {
  /* Carré fixe sous le header, aligné à gauche */
  #portrait-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: fixed;
    top: calc(var(--header-h) + 34px + 10px); /* header + tab-bar + marge */
    left: 12px;
    z-index: 12;
    /* Fond */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 8px 8px 7px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4),
                0 0 12px rgba(var(--emotion-rgb, 139,108,255), 0.12);
  }

  .pm-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 14px;
    overflow: hidden;
  }

  #portrait-mobile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 14px;
    transition: opacity 0.25s ease;
  }

  /* Glow émotion en incrustation sur l'image */
  .pm-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(var(--emotion-rgb, 139,108,255), 0.35);
    pointer-events: none;
  }

  .pm-glow {
    position: absolute;
    inset: -8px;
    border-radius: 18px;
    background: radial-gradient(circle, rgba(var(--emotion-rgb, 139,108,255), 0.18) 0%, transparent 70%);
    z-index: -1;
    animation: portraitPulse 3s ease-in-out infinite;
  }

  .pm-mood {
    font-size: 0.58rem;
    color: var(--text-faint);
    letter-spacing: 1.5px;
    text-transform: lowercase;
    transition: color 0.4s ease;
    text-align: center;
  }

  .pm-mood.mood-joyful      { color: #ffd060; }
  .pm-mood.mood-sad         { color: #8898cc; }
  .pm-mood.mood-curious     { color: #60c890; }
  .pm-mood.mood-playful     { color: #e080b0; }
  .pm-mood.mood-calm        { color: #70b8d8; }
  .pm-mood.mood-excited     { color: #ffc840; }
  .pm-mood.mood-grateful    { color: #e8a870; }
  .pm-mood.mood-loving      { color: #e070a0; }
  .pm-mood.mood-proud       { color: #c8a8f8; }
  .pm-mood.mood-sarcastic   { color: #a0c870; }
  .pm-mood.mood-flirty      { color: #f098b8; }
  .pm-mood.mood-competitive { color: #ff8860; }
  .pm-mood.mood-amused      { color: #f8c840; }
  .pm-mood.mood-confident   { color: #d8b8f8; }
  .pm-mood.mood-mischievous { color: #c080e8; }
  .pm-mood.mood-dreamy      { color: #98b8f8; }
  .pm-mood.mood-annoyed     { color: #e09060; }
  .pm-mood.mood-tender      { color: #f0a8c8; }
  .pm-mood.mood-surprised   { color: #b8a8e8; }
}

/* ---- Messages ---- */
.messages-container,
#messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 72%;
  padding: 12px 16px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 0.92rem;
  word-wrap: break-word;
  position: relative;
  animation: msgIn 0.3s ease;
}

@keyframes msgIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.msg.user {
  align-self: flex-end;
  background: var(--user-bubble);
  border-bottom-right-radius: 6px;
  border: 1px solid rgba(139, 108, 255, 0.08);
}

.msg.assistant {
  align-self: flex-start;
  background: var(--ai-bubble);
  border: 1px solid var(--border);
  border-bottom-left-radius: 6px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: flex-start;
}

.msg-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex-shrink: 0;
  margin-top: 2px;
  filter: drop-shadow(0 0 3px rgba(var(--emotion-rgb, 139,108,255), 0.3));
}

.msg-body {
  flex: 1;
  min-width: 0;
}

.msg .msg-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.msg .emotion-badge {
  display: inline-block;
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0.3px;
}

.msg .timing-badge {
  display: inline-block;
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--surface2);
  color: var(--text-faint);
  font-family: 'Outfit', monospace;
  letter-spacing: 0.3px;
}

.msg.user .msg-text { white-space: pre-wrap; }
.msg.assistant .msg-text { line-height: 1.6; }
.msg.assistant .msg-text p { margin: 0 0 0.5em 0; }
.msg.assistant .msg-text p:last-child { margin-bottom: 0; }
.msg.assistant .msg-text strong { color: var(--accent-glow); }
.msg.assistant .msg-text em { color: var(--text-dim); font-style: italic; }
.msg.assistant .msg-text code {
  background: rgba(255,255,255,0.06);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.88em;
}
.msg.assistant .msg-text pre {
  background: rgba(0,0,0,0.3);
  padding: 10px 14px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
}
.msg.assistant .msg-text pre code {
  background: none;
  padding: 0;
}
.msg.assistant .msg-text ul, .msg.assistant .msg-text ol {
  padding-left: 1.4em;
  margin: 0.4em 0;
}
.msg.assistant .msg-text blockquote {
  border-left: 3px solid var(--accent-glow);
  margin: 0.4em 0;
  padding-left: 12px;
  color: var(--text-dim);
}

.msg audio {
  display: block;
  margin-top: 8px;
  width: 100%;
  max-width: 280px;
  height: 34px;
}

/* ---- Loading Indicator ---- */
#loading {
  display: none;
  align-self: flex-start;
  padding: 12px 18px;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.loading-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loading-dots {
  display: flex;
  gap: 4px;
}

.loading-dots span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: dotBounce 1.2s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dotBounce {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.1); }
}

/* ---- Input Bar ---- */
#input-bar {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  align-items: flex-end;
}

#msg-input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 0.92rem;
  resize: none;
  outline: none;
  max-height: 120px;
  font-family: 'Outfit', sans-serif;
  line-height: 1.4;
  transition: border-color 0.2s, box-shadow 0.2s;
}

#msg-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

#msg-input::placeholder { color: var(--text-faint); }

.input-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}

.input-btn:hover { background: var(--accent-glow); }
.input-btn:active { transform: scale(0.95); }
.input-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.input-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

#btn-mic.recording {
  background: var(--danger);
  animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

/* Scrollbar */
#messages::-webkit-scrollbar,
#messages-dark::-webkit-scrollbar { width: 5px; }
#messages::-webkit-scrollbar-track,
#messages-dark::-webkit-scrollbar-track { background: transparent; }
#messages::-webkit-scrollbar-thumb,
#messages-dark::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
#messages::-webkit-scrollbar-thumb:hover,
#messages-dark::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ============================================= */
/* ============ CONTEXT DEBUG PANEL ============ */
/* ============================================= */

#context-panel {
  display: none;
  width: 370px;
  min-width: 370px;
  background: var(--bg-subtle);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px 16px;
  flex-shrink: 0;
}

#context-panel.open { display: flex; flex-direction: column; gap: 14px; }

#context-panel .ctx-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#context-panel .ctx-header h3 {
  font-size: 0.82rem;
  color: var(--accent-glow);
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}

#btn-ctx-close {
  display: none;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  font-size: 1.2rem;
  line-height: 1;
}

#context-panel .ctx-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  transition: border-color 0.2s;
}

#context-panel .ctx-section:hover { border-color: rgba(139, 108, 255, 0.15); }

#context-panel .ctx-section h4 {
  font-size: 0.72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

#context-panel .ctx-section h4::before {
  content: '\25B8';
  font-size: 0.6rem;
  transition: transform 0.2s;
  display: inline-block;
}

#context-panel .ctx-section h4.expanded::before {
  transform: rotate(90deg);
}

#context-panel .ctx-content {
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text);
}

#context-panel .ctx-content.collapsed { display: none; }

/* ---- Dream Footer & Trigger Button ---- */
.dream-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 8px;
}

.dream-footer #ctx-next-dream {
  font-size: 0.68rem;
  color: var(--text-faint);
}

#btn-trigger-dream {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: transparent;
  color: var(--moon);
  font-family: 'Outfit', sans-serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

#btn-trigger-dream:hover {
  background: rgba(201, 184, 255, 0.08);
  border-color: var(--accent);
  color: var(--accent-glow);
  box-shadow: 0 0 12px rgba(139, 108, 255, 0.15);
}

#btn-trigger-dream:active {
  transform: scale(0.96);
}

#btn-trigger-dream.dreaming {
  pointer-events: none;
  border-color: var(--accent);
  color: var(--accent-glow);
  animation: dream-pulse 1.8s ease-in-out infinite;
}

@keyframes dream-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(139, 108, 255, 0.1); }
  50% { box-shadow: 0 0 18px rgba(139, 108, 255, 0.3); }
}

/* ---- Memory Items ---- */
#context-panel .memory-item {
  padding: 8px 0;
  border-bottom: 1px solid rgba(42, 42, 68, 0.5);
}

#context-panel .memory-item:last-child { border-bottom: none; }

#context-panel .memory-item .mem-content {
  font-size: 0.8rem;
  margin-bottom: 6px;
  line-height: 1.5;
}

#context-panel .memory-item .mem-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}

#context-panel .mem-badge {
  font-size: 0.62rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--surface2);
  color: var(--text-dim);
  font-weight: 400;
}

#context-panel .mem-badge.type-fact { color: #6ec6ff; }
#context-panel .mem-badge.type-episode { color: #ffa86e; }
#context-panel .mem-badge.type-emotion { color: #ff6e9b; }
#context-panel .mem-badge.type-meta { color: #b8ff6e; }

/* ---- Emotional Weight Bar ---- */
#context-panel .ew-bar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  color: var(--text-dim);
}

#context-panel .ew-bar-fill {
  width: 36px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
  display: inline-block;
}

#context-panel .ew-bar-inner {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s;
}

/* ---- Stats Grid ---- */
#context-panel .ctx-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

#context-panel .stat-item { text-align: center; }

#context-panel .stat-value {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-glow);
}

#context-panel .stat-label {
  font-size: 0.62rem;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

/* ---- System Prompt ---- */
#context-panel pre {
  font-size: 0.68rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
  background: var(--surface2);
  padding: 10px;
  border-radius: 8px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---- Essence ---- */
#context-panel .essence-text {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ---- Reasoning Log ---- */
#context-panel .reasoning-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 6px 0;
  border-bottom: 1px solid rgba(42, 42, 68, 0.4);
  font-size: 0.78rem;
  line-height: 1.4;
}

#context-panel .reasoning-item:last-child { border-bottom: none; }

#context-panel .reasoning-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

#context-panel .reasoning-text { color: var(--text); }

/* ---- Extracted Memories ---- */
#context-panel .extracted-item {
  padding: 6px 0;
  border-bottom: 1px solid rgba(42, 42, 68, 0.4);
  animation: fadeInNew 0.4s ease;
}

#context-panel .extracted-item:last-child { border-bottom: none; }

#context-panel .extracted-new-badge {
  font-size: 0.58rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(78, 205, 130, 0.15);
  color: var(--success);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

@keyframes fadeInNew {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Panel Footer (streaming toggle) ---- */
#ctx-panel-footer {
  margin-top: auto;
  padding: 10px 2px 2px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
}

.stream-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}

.stream-toggle input { display: none; }

.stream-toggle-track {
  width: 28px;
  height: 15px;
  border-radius: 8px;
  background: var(--border);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}

.stream-toggle input:checked + .stream-toggle-track {
  background: var(--accent);
}

.stream-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s;
}

.stream-toggle input:checked + .stream-toggle-track .stream-toggle-thumb {
  left: 15px;
}

#stream-toggle-label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: color 0.2s;
}

.stream-toggle:has(input:checked) #stream-toggle-label {
  color: var(--accent-glow);
}

/* Context panel scrollbar */
#context-panel::-webkit-scrollbar { width: 4px; }
#context-panel::-webkit-scrollbar-track { background: transparent; }
#context-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

/* ============================================= */
/* ============== PURGE MODAL ================= */
/* ============================================= */

#purge-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 55;
  backdrop-filter: blur(4px);
}

#purge-backdrop.open { display: block; }

#purge-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 520px;
  max-height: 80vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  z-index: 56;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 30px rgba(139, 108, 255, 0.08);
  animation: purgeIn 0.25s ease;
}

#purge-modal.open { display: flex; }

@keyframes purgeIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.purge-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.purge-header h3 {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.5px;
}

#purge-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 6px;
  transition: color 0.2s;
}

#purge-close:hover { color: var(--text); }

.purge-actions-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(42, 42, 68, 0.5);
}

#purge-count {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.purge-btn-sm {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.purge-btn-sm:hover { border-color: var(--accent); color: var(--accent); }

#purge-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  max-height: 50vh;
}

#purge-list::-webkit-scrollbar { width: 4px; }
#purge-list::-webkit-scrollbar-track { background: transparent; }
#purge-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.purge-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.purge-item:hover { background: rgba(139, 108, 255, 0.04); }

.purge-item input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  flex-shrink: 0;
}

.purge-item-body {
  flex: 1;
  min-width: 0;
}

.purge-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.purge-role {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.purge-role.user {
  background: rgba(139, 108, 255, 0.12);
  color: var(--accent-glow);
}

.purge-role.assistant {
  background: rgba(201, 184, 255, 0.1);
  color: var(--moon);
}

.purge-date {
  font-size: 0.65rem;
  color: var(--text-faint);
}

.purge-item-text {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.purge-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  justify-content: flex-end;
}

.purge-btn {
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.purge-btn.secondary {
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.purge-btn.secondary:hover { border-color: var(--text-dim); color: var(--text); }

.purge-btn.danger {
  background: var(--danger);
  color: #fff;
}

.purge-btn.danger:hover { background: #ff3d62; }
.purge-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================= */
/* ============ RESPONSIVE / MOBILE ============ */
/* ============================================= */

@media (max-width: 640px) {
  :root { --header-h: 52px; }

  /* Bloc desktop : masqué sur mobile */
  #portrait-panel { display: none !important; }

  .msg { max-width: 88%; font-size: 0.9rem; padding: 10px 14px; }
  #header { padding: 0 14px; }
  #input-bar { padding: 10px 12px; }
  #messages { padding: 14px 12px; }

  /* Portrait - smaller on mobile */
  .portrait-wrap { width: 34px; height: 34px; }
  #portrait-img { width: 34px; height: 34px; }
  .portrait-glow { inset: -6px; }
  .luna-identity { gap: 8px; }
  .header-luna { font-size: 0.95rem; letter-spacing: 2px; }
  .luna-mood { font-size: 0.58rem; }

  /* Message avatars smaller */
  .msg-avatar { width: 24px; height: 24px; }
  .msg.assistant { gap: 8px; }

  /* Hide desktop header actions, show hamburger */
  .header-right { display: none !important; }
  #model-badge { display: none; }
  #btn-menu { display: flex; }

  /* Context panel = fullscreen overlay on mobile */
  #context-panel {
    position: fixed;
    inset: 0;
    width: 100% !important;
    min-width: 0 !important;
    z-index: 50;
    border-left: none;
    padding: 16px 14px;
    background: var(--bg);
  }

  #context-panel.open { display: flex; }
  #btn-ctx-close { display: block; }

  /* Tab bar mobile */
  #tab-bar { padding: 0 14px; min-height: 34px; }
  #tab-bar .tab { padding: 6px 14px; font-size: 0.78rem; }

  /* Settings panel responsive */
  .settings-row { flex-direction: column; }
  .settings-field select,
  .settings-field input { min-width: 0; width: 100%; }
  #btn-apply-llm { width: 100%; }

  #messages-dark { padding: 14px 12px; }

  /* --- Auto-hide header + tab-bar au scroll --- */
  #header {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  body.header-hidden #header {
    transform: translateY(-100%);
    margin-top: calc(-1 * var(--header-h));
  }

  #tab-bar {
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                margin-top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  body.header-hidden #tab-bar {
    transform: translateY(-100%);
    margin-top: -34px;
  }

  /* Portrait mobile suit header + tab-bar */
  #portrait-mobile {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.header-hidden #portrait-mobile {
    top: 10px;
  }

  /* Drawer suit le header */
  #mobile-drawer {
    transition: top 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.header-hidden #mobile-drawer {
    top: 0;
  }
}

@media (min-width: 641px) {
  #mobile-drawer { display: none !important; }
  #drawer-backdrop { display: none !important; }
}

/* ---- Vision / Image ---- */

/* Bouton attacher une image */
#btn-attach {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1.1rem;
  padding: 0;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
#btn-attach:hover { border-color: var(--accent); color: var(--accent); }

/* Barre de preview avant envoi */
#img-preview-bar {
  display: flex;
  gap: 8px;
  padding: 8px 16px 0;
  flex-wrap: wrap;
}

/* Badge preview image */
.img-preview-badge {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  overflow: visible;
  flex-shrink: 0;
}
.img-preview-badge img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.img-preview-cancel {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--danger);
  color: #fff;
  border: none;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Thumbnail dans les bulles user */
.msg-image {
  margin-bottom: 6px;
}
.msg-img-thumb {
  max-width: 180px;
  max-height: 180px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  border: 1px solid var(--border);
  display: block;
  transition: opacity 0.2s;
}
.msg-img-thumb:hover { opacity: 0.85; }

/* Badge type image dans le panneau contexte */
.mem-badge.type-image { background: rgba(255, 160, 80, 0.15); color: #ffaa55; }

/* Thumbnail souvenir image dans le ctx panel */
.mem-img-thumb {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border);
  float: right;
  margin: 0 0 6px 8px;
  cursor: pointer;
  transition: opacity 0.2s;
}
.mem-img-thumb:hover { opacity: 0.8; }

/* Drag & drop overlay sur la zone de chat */
.chat-col { position: relative; }
.chat-col.drag-over::after {
  content: 'Déposer l\'image ici';
  position: absolute;
  inset: 0;
  background: rgba(139, 108, 255, 0.12);
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--accent-glow);
  pointer-events: none;
  z-index: 10;
}

/* Lightbox */
#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 200;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 10px;
  object-fit: contain;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}