/* ============================================================
   VARIABLES DE THEME
   ============================================================ */

:root {
  /* Couleurs — thème jour (Friend mode = défaut) */
  --bg-primary: #f4ede4;
  --bg-secondary: #ede6dc;
  --bg-terminal: #f4ede4;
  --text-primary: #2c2c2c;
  --text-secondary: #888888;
  --accent: #2c2c2c;
  --accent-hover: #1a1a1a;
  --success: #4a7c4e;
  --warning: #b07d2a;
  --error: #c0392b;
  --border: rgba(139, 119, 90, 0.15);

  /* Polices */
  --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  --font-hub: 'tt-commons-pro', 'TT Commons Pro', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Taille police dynamique (ajustée via capsule AA) */
  --font-size-delta: 0px;

  /* Safe area (notch iOS) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

/* ============================================================
   RESET ET BASE
   ============================================================ */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   LAYOUT GENERAL
   ============================================================ */

.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height pour iOS */
}

.screen.hidden {
  display: none;
}

/* ============================================================
   ECRAN LOGIN
   ============================================================ */

#screen-login {
  align-items: center;
  justify-content: center;
  background: #000;
}

.login-container {
  max-width: 320px;
  width: 100%;
  text-align: center;
  padding: 0 20px;
}

.logo {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 40px;
  color: #fff;
  opacity: 0.5;
}

#login-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

#login-form input {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  text-align: center;
  letter-spacing: 2px;
  outline: none;
  border-radius: 0;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

#login-form input:focus {
  border-color: rgba(255,255,255,0.6);
}

#login-form input::placeholder {
  color: rgba(255,255,255,0.3);
}

.btn-primary {
  margin-top: 20px;
  padding: 12px 40px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 0;
  cursor: pointer;
  font-weight: 400;
  transition: opacity 0.2s;
  width: auto;
}

.btn-primary:hover {
  opacity: 0.8;
}

.btn-primary:active {
  transform: scale(0.98);
}

.error {
  font-size: 13px;
  color: #FF2600;
  margin-top: 16px;
}

.error.hidden {
  display: none;
}

/* Feedback succès (ex: retry Whisper confirmé) — override couleur rouge */
.error.success {
  color: #34C759;
}

/* ============================================================
   ECRAN SESSIONS
   ============================================================ */

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

.sessions-header h2 {
  font-size: 24px;
  font-weight: 600;
}

.btn-new-session {
  width: 44px;
  height: 44px;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-new-session:hover {
  background: var(--accent-hover);
}

.btn-assistant {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s;
}

.btn-assistant:hover {
  background: rgba(44, 44, 44, 0.06);
}

.btn-assistant:active {
  background: rgba(44, 44, 44, 0.10);
}

.sessions-list {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: calc(280px + var(--safe-bottom)); /* Espace pour le bandeau monitoring (9 lignes) + safe area iPhone */
}

.session-card {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.session-card:hover {
  background: var(--bg-secondary);
  opacity: 0.85;
}

.session-card:active {
  transform: scale(0.98);
}

.session-card-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
}

.session-card-info {
  font-size: 14px;
  color: var(--text-secondary);
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.status-dot.idle {
  background: var(--success);
}

.status-dot.active {
  background: var(--warning);
  animation: pulse 2s ease-in-out infinite;
}

.status-dot.unknown {
  background: var(--text-secondary);
}

/* ============================================================
   ECRAN SESSION (PRINCIPAL)
   ============================================================ */

#screen-session {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

/* Onglets */
.tabs-bar {
  display: flex;
  align-items: center;
  height: 88px;
  padding: 0 8px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tabs-bar .tab,
.tabs-bar .btn-toggle-mode,
.tabs-bar .tab-add,
.tabs-bar .tab-settings,
.tabs-bar .btn-panel-info,
.tabs-bar .font-size-capsule,
.tabs-bar .btn-toggle-night {
  margin-bottom: 0;
}

/* Logo Motherboard dans la tabs-bar */
.header-logo {
  height: 76px;
  width: auto;
  object-fit: contain;
  margin-right: 8px;
  flex-shrink: 0;
  opacity: 0.85;
}

/* Mode nuit : logo blanc */
.night-mode .header-logo,
.light-mode.night-mode .header-logo {
  filter: invert(1) brightness(2);
}

.tab {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

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

.btn-toggle-mode, .tab-add, .tab-settings {
  flex-shrink: 0;
  margin-left: auto;
  width: 36px;
  height: 36px;
  font-size: 20px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

/* Capsule "terminal" — toggle on/off, visuellement distinct des onglets */
#btn-toggle-sys {
  width: auto;
  height: 28px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  line-height: 1;
  display: flex;
  align-items: center;
}

.btn-toggle-mode:hover, .tab-add:hover, .tab-settings:hover {
  background: rgba(44, 44, 44, 0.06);
  color: var(--accent);
}

.btn-toggle-mode {
  margin-left: 4px;
  order: 99;
}

.btn-toggle-mode.active {
  color: var(--accent);
  background: rgba(44, 44, 44, 0.10);
}

.tab-add {
  order: 101;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(44, 44, 44, 0.08);
}

.tab-settings {
  margin-left: 4px;
  order: 102;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

/* Menu settings */
.settings-menu {
  position: absolute;
  top: 52px;
  right: 12px;
  width: 200px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 1000;
}

.settings-menu.hidden {
  display: none;
}

.settings-menu-item {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 500;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  transition: background 0.2s;
}

.settings-menu-item:last-child {
  border-bottom: none;
}

.settings-menu-item:hover {
  background: rgba(44, 44, 44, 0.06);
}

.settings-menu-item:active {
  background: rgba(44, 44, 44, 0.12);
}

/* Settings menu toggle (pour le son) */
.settings-menu-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.settings-menu-toggle:hover {
  background: transparent;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  transition: 0.3s;
  border-radius: 28px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--accent);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* Status bar */
.status-bar {
  padding: 8px 16px;
  font-size: 13px;
  text-align: center;
  background: rgba(255, 167, 38, 0.1);
  color: var(--warning);
  border-bottom: 1px solid var(--border);
}

.status-bar.hidden {
  display: none;
}

/* Vue terminal */
.terminal-view {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background: var(--bg-terminal);
  -webkit-overflow-scrolling: touch;
}

#terminal-content {
  font-family: var(--font-mono);
  line-height: 1.5;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
  width: 100%;
  margin: 0;
}

/* Zone de controle */
.control-zone {
  flex-shrink: 0;
  padding: 14px 12px 12px;
  padding-bottom: max(14px, var(--safe-bottom));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

/* Sélecteur source audio */
.audio-source-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.audio-source-wrapper.hidden {
  display: none;
}

.audio-source-select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--text-secondary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.control-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  overflow: visible;
}

#text-input {
  flex: 1;
  min-height: 44px;
  max-height: 120px;
  padding: 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-primary);
  color: var(--text-primary);
  resize: none;
  outline: none;
  transition: border-color 0.2s;
}

#text-input:focus {
  border-color: var(--accent);
}

.btn-mic, .btn-send {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  position: relative;
}

.btn-mic:hover, .btn-send:hover {
  background: var(--accent-hover);
}

.btn-mic:active, .btn-send:active {
  transform: scale(0.95);
}

.btn-send:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Indicateur visuel pendant l'envoi */
.btn-send.sending {
  opacity: 0.7;
  animation: btn-pulse 0.8s ease-in-out infinite;
}

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

.btn-mic svg, .btn-send svg {
  width: 24px;
  height: 24px;
}

/* Bouton Escape - Style discret */
.btn-escape {
  flex-shrink: 0;
  width: auto;
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  border: none;
  border-radius: 10px;
  background: #3a3a4a;
  color: #d0d0d0;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-hub);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-escape:hover {
  background: #4a4a5a;
}

.btn-escape:active {
  transform: scale(0.95);
}

.btn-escape:focus {
  outline: none;
  background: #3a3a4a;
}

/* Bouton ESC toujours visible - pas de .hidden */

/* Bouton micro en enregistrement */
.btn-mic.recording {
  background: var(--error);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Bouton micro en transcription (Whisper) */
.btn-mic.transcribing {
  background: var(--accent);
  pointer-events: none;
}

.btn-mic.transcribing svg {
  display: none;
}

.btn-mic.transcribing::after {
  content: '';
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mic-timer {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.mic-timer.hidden {
  display: none;
}

/* Bouton retry transcription Whisper - discret, à côté du micro */
.btn-retry {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}

.btn-retry:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.5);
}

.btn-retry:active {
  transform: scale(0.92);
}

.btn-retry.hidden {
  display: none;
}

.btn-retry svg {
  width: 14px;
  height: 14px;
}

/* Rotation pendant le retry */
.btn-retry.retrying svg {
  animation: spin 0.8s linear infinite;
}

/* Bouton pièce jointe - rond comme les autres boutons CLVox */
.btn-attach {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
  border-radius: 50%;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.btn-attach:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-attach:active:not(:disabled) {
  transform: scale(0.95);
}

.btn-attach:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-attach svg {
  width: 20px;
  height: 20px;
}

/* Zone preview pièces jointes */
.attachments-preview {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin-bottom: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.attachments-preview.hidden {
  display: none;
}

.attachment-item {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-secondary);
  border: 2px solid var(--border);
}

.attachment-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.attachment-item.pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.attachment-item.pdf svg {
  width: 32px;
  height: 32px;
  color: var(--error);
  margin-bottom: 4px;
}

.attachment-item.pdf .filename {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
}

/* Fichiers texte / JSON / code */
.attachment-item.text-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.attachment-item.text-file svg {
  width: 32px;
  height: 32px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.attachment-item.text-file .filename {
  font-size: 10px;
  color: var(--text-secondary);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
}

.attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: all 0.2s;
}

.attachment-remove:hover {
  background: var(--error);
  transform: scale(1.1);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

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

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

.modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.hidden {
  display: none !important;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  width: 100%;
  max-width: 400px;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

.modal-title {
  margin: 0 0 20px 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal-input {
  width: 100%;
  padding: 14px;
  font-size: 16px;
  font-family: var(--font-mono);
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--bg-primary);
  color: var(--text-primary);
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 20px;
}

.modal-input:focus {
  border-color: rgba(255, 255, 255, 0.4);
}

.modal-actions {
  display: flex;
  gap: 12px;
}

.btn-modal {
  flex: 1;
  padding: 14px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}

.btn-modal-primary {
  background: #f4ede4;
  color: #3d3428;
}

.btn-modal-primary:hover {
  opacity: 0.85;
}

.btn-modal-secondary {
  background: var(--bg-primary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.btn-modal-secondary:hover {
  background: var(--border);
}

.btn-modal-danger {
  background: #ef5350;
}
.btn-modal-danger:hover {
  background: #e53935;
}

.modal-text {
  color: var(--text-secondary);
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.btn-modal:active {
  transform: scale(0.98);
}

/* ============================================================
   BOUTONS SESSION CARD
   ============================================================ */

.session-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.btn-session-action {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

.btn-session-action:hover {
  background: rgba(44, 44, 44, 0.06);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-session-action:active {
  transform: scale(0.95);
}

.btn-session-action.danger:hover {
  background: rgba(239, 83, 80, 0.1);
  border-color: var(--error);
  color: var(--error);
}

/* ============================================================
   SYSTEM MONITOR
   ============================================================ */

.system-monitor {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-terminal);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  padding-bottom: max(12px, var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  z-index: 1;
  color: var(--text-secondary);
}

.system-monitor-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.monitor-label {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-width: 80px;
}

.monitor-value {
  color: var(--text-primary);
  font-weight: 500;
}

/* ============================================================
   TOAST NOTIFICATION IN-APP
   ============================================================ */

.toast-notification {
  position: fixed;
  top: env(safe-area-inset-top, 20px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(30, 27, 24, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10000;
  cursor: pointer;
  backdrop-filter: blur(10px);
  animation: slideDown 0.3s ease;
  max-width: 90%;
}

.toast-notification strong {
  color: #fff;
  font-size: 14px;
}

.toast-notification span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}

.toast-notification.fade-out {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
  transition: all 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================
   VUE DISCOURSE (mode SYS actif) — mode jour
   ============================================================ */

.discourse-view {
  font-family: var(--font-hub);
  padding: 16px 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #f4ede4;
}

/* Card container (une par message) */
.discourse-card {
  background: #f4ede4;
  border: 1px solid rgba(139, 119, 90, 0.15);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(120, 100, 70, 0.08), 0 1px 2px rgba(120, 100, 70, 0.05);
  padding: 16px;
  margin-bottom: 16px;
  max-width: 75%;
  min-width: 200px;
}

.discourse-card-claude {
  align-self: flex-start;
}

.discourse-card-fabrice {
  align-self: flex-end;
}

/* Nom du speaker — TT Commons Pro, bold */
.discourse-card-name {
  font-family: var(--font-hub);
  font-weight: 700;
  font-size: 16px;
  color: #3d3428;
  margin-bottom: 12px;
}

/* Contenu du message (markdown rendu pour Claude, texte brut pour Fabrice) */
.discourse-card-content {
  background: #ede6dc;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  font-family: var(--font-hub);
  font-weight: 500;
  line-height: 1.6;
  color: #2c2c2c;
  word-break: break-word;
}

.discourse-card-content:last-child {
  margin-bottom: 0;
}

/* État vide — placeholder */
.discourse-empty {
  text-align: center;
  color: #94a3b8;
  font-family: var(--font-hub);
  font-style: italic;
  padding: 40px 16px;
}

/* Indicateur "Claude répond..." */
.discourse-waiting {
  text-align: center;
  color: #94a3b8;
  font-family: var(--font-hub);
  font-style: italic;
  font-size: 13px;
  padding: 12px 16px;
  animation: discourse-pulse 1.5s ease-in-out infinite;
}

@keyframes discourse-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* ============================================================
   STYLES MARKDOWN — scopés sous .discourse-card-claude
   ============================================================ */

.discourse-card-claude .discourse-card-content p {
  margin: 8px 0;
  line-height: 1.6;
}

.discourse-card-claude .discourse-card-content p:first-child {
  margin-top: 0;
}

.discourse-card-claude .discourse-card-content p:last-child {
  margin-bottom: 0;
}

.discourse-card-claude .discourse-card-content h1,
.discourse-card-claude .discourse-card-content h2,
.discourse-card-claude .discourse-card-content h3,
.discourse-card-claude .discourse-card-content h4,
.discourse-card-claude .discourse-card-content h5,
.discourse-card-claude .discourse-card-content h6 {
  margin: 16px 0 8px;
  font-weight: 600;
  line-height: 1.3;
}

.discourse-card-claude .discourse-card-content h1 { font-size: 1.4em; }
.discourse-card-claude .discourse-card-content h2 { font-size: 1.25em; }
.discourse-card-claude .discourse-card-content h3 { font-size: 1.1em; }
.discourse-card-claude .discourse-card-content h4,
.discourse-card-claude .discourse-card-content h5,
.discourse-card-claude .discourse-card-content h6 { font-size: 1em; }

.discourse-card-claude .discourse-card-content ul,
.discourse-card-claude .discourse-card-content ol {
  padding-left: 1.5em;
  margin: 8px 0;
}

.discourse-card-claude .discourse-card-content li {
  margin: 4px 0;
}

.discourse-card-claude .discourse-card-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 12px;
}

.discourse-card-claude .discourse-card-content th,
.discourse-card-claude .discourse-card-content td {
  border: 1px solid rgba(139, 119, 90, 0.25);
  padding: 8px 12px;
  text-align: left;
}

.discourse-card-claude .discourse-card-content th {
  font-weight: 600;
  background: rgba(139, 119, 90, 0.08);
}

.discourse-card-claude .discourse-card-content pre {
  background: rgba(44, 44, 44, 0.06);
  border-radius: 6px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 8px 0;
}

.discourse-card-claude .discourse-card-content pre > code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: none;
  padding: 0;
  border-radius: 0;
}

.discourse-card-claude .discourse-card-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: rgba(44, 44, 44, 0.06);
  padding: 2px 6px;
  border-radius: 3px;
}

.discourse-card-claude .discourse-card-content blockquote {
  border-left: 3px solid rgba(139, 119, 90, 0.3);
  padding-left: 12px;
  margin: 8px 0;
  color: #666;
}

.discourse-card-claude .discourse-card-content hr {
  border: none;
  border-top: 1px solid rgba(139, 119, 90, 0.2);
  margin: 16px 0;
}

.discourse-card-claude .discourse-card-content img {
  max-width: 100%;
  border-radius: 4px;
}

.discourse-card-claude .discourse-card-content a {
  color: #2c2c2c;
  text-decoration: underline;
  text-decoration-color: rgba(44, 44, 44, 0.45);
  text-underline-offset: 2px;
}

.discourse-card-claude .discourse-card-content a:active {
  color: #3d3428;
}

/* Gras et italique — règles explicites pour neutraliser font-weight: 300 du parent */
.discourse-card-claude .discourse-card-content strong {
  font-weight: 700;
}

.discourse-card-claude .discourse-card-content em {
  font-style: italic;
  font-weight: inherit;
}

.discourse-card-claude .discourse-card-content strong em,
.discourse-card-claude .discourse-card-content em strong {
  font-weight: 700;
  font-style: italic;
}

/* Message utilisateur : texte brut, white-space pre-wrap */
.discourse-card-fabrice .discourse-card-content {
  white-space: pre-wrap;
}

/* ============================================================
   MODE LIGHT — header et footer (actif quand .light-mode sur #screen-session)
   ============================================================ */

.light-mode {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fond body/html en mode light — corrige les bandes violet iOS (safe areas) */
html:has(#screen-session.light-mode),
body:has(#screen-session.light-mode) {
  background: #f6efe3;
}

/* Fond body/html en mode nuit — couleur en dur car body est hors du scope
   de .night-mode (les variables CSS custom sont héritées depuis :root,
   pas depuis #screen-session). #221f1b = --bg-primary du night mode. */
html:has(#screen-session.night-mode),
body:has(#screen-session.night-mode) {
  background: #221f1b;
}

.light-mode .tabs-bar {
  background: #f6efe3;
  border-bottom: 1px solid rgba(139, 119, 90, 0.12);
}

.light-mode .tab {
  color: #3a3a3a;
}

.light-mode .tab.active {
  color: #3d3428;
  border-bottom-color: #3d3428;
}

.light-mode .btn-toggle-mode {
  color: #3a3a3a;
}

.light-mode .btn-toggle-mode.active {
  color: #3d3428;
  background: rgba(139, 119, 90, 0.10);
}

.light-mode .tab-settings {
  color: #3a3a3a;
}

.light-mode .tab-add {
  color: #3a3a3a;
  background: rgba(139, 119, 90, 0.12);
}

.light-mode .tab-add:hover,
.light-mode .tab-settings:hover {
  background: rgba(139, 119, 90, 0.10);
  color: #3d3428;
}

/* Menu settings */
.light-mode .settings-menu {
  background: #f6efe3;
  border-color: rgba(139, 119, 90, 0.15);
  box-shadow: 0 8px 16px rgba(120, 100, 70, 0.12);
}

.light-mode .settings-menu-item {
  color: #2c2c2c;
  border-bottom-color: rgba(139, 119, 90, 0.12);
}

.light-mode .settings-menu-item:hover {
  background: rgba(44, 44, 44, 0.06);
}

.light-mode .settings-menu-item:active {
  background: rgba(44, 44, 44, 0.1);
}

/* Session cards light mode */
.light-mode .session-card {
  background: #ede2d2;
  border-color: rgba(139, 119, 90, 0.12);
}

.light-mode .session-card:hover {
  background: #e7d8c8;
}

.light-mode .session-card-name {
  color: #3d3428;
}

.light-mode .session-card-info {
  color: #555;
}

.light-mode .sessions-header {
  color: #3d3428;
}

.light-mode .btn-session-action {
  color: #3a3a3a;
  border-color: rgba(139, 119, 90, 0.15);
}

.light-mode .control-zone {
  background: #f4ede4;
  border-top: 1px solid rgba(139, 119, 90, 0.12);
}

.light-mode #text-input {
  background: #ede6dc;
  color: #2c2c2c;
  border-color: rgba(139, 119, 90, 0.15);
}

.light-mode #text-input::placeholder {
  color: #888;
}

.light-mode .btn-escape {
  background: #ede6dc;
  color: #3a3a3a;
}

.light-mode .btn-escape:hover {
  background: #e0d8cc;
}

.light-mode .btn-attach {
  background: #ede6dc;
  border-color: rgba(139, 119, 90, 0.15);
  color: #3a3a3a;
}

.light-mode .btn-attach:hover:not(:disabled) {
  border-color: #2c2c2c;
  color: #2c2c2c;
}

.light-mode .btn-retry {
  background: rgba(44, 44, 44, 0.06);
  border-color: rgba(44, 44, 44, 0.20);
  color: #2c2c2c;
}

.light-mode .btn-retry:hover {
  background: rgba(44, 44, 44, 0.12);
  border-color: #2c2c2c;
}

.light-mode .status-bar {
  background: #f4ede4;
  color: #555;
  border-bottom-color: rgba(139, 119, 90, 0.12);
}

.light-mode #chat-status-bar {
  background: #f4ede4;
}

/* Discourse cards mode jour — fond distinct du fond de vue pour les rendre visibles */
.light-mode .discourse-card {
  background: #ede2d2;
  box-shadow: 0 1px 4px rgba(139, 119, 90, 0.12), 0 1px 2px rgba(139, 119, 90, 0.08);
}

/* Contenu mode jour — légèrement plus sombre que la card */
.light-mode .discourse-card-content {
  background: #e5d9cb;
}

/* Puce nom speaker — verte en mode jour */
.light-mode .discourse-card-dot {
  color: #2ecc71;
  font-size: 14px;
}

/* Correction 3 — Tabs en TT Commons Pro, plus épais */
.light-mode .tab {
  font-family: var(--font-hub);
  font-weight: 600;
}

/* Correction 4 — Supprimer la bordure sombre visible en mode light */
.light-mode .terminal-view {
  border: none;
  outline: none;
  background: #f4ede4;
}

.light-mode #terminal-content {
  border: none;
  outline: none;
}

/* Modales — les éléments .modal sont au niveau du body (hors #screen-session),
   on utilise :has() pour les cibler en mode jour uniquement */
body:has(#screen-session.light-mode) .btn-modal-primary {
  background: #e5ddcf;
  color: #3d3428;
}

body:has(#screen-session.light-mode) .modal-input:focus {
  border-color: rgba(44, 44, 44, 0.4);
}


/* Feature prevue : indicateur "Claude pense..." — element DOM present mais aucun JS ne l'utilise */
/* Status bar entre terminal et control-zone — indicateur thinking/crunching sans clignotement */
#chat-status-bar {
  font-family: var(--font-hub);
  font-size: 12px;
  font-weight: 500;
  font-style: italic;
  color: #94a3b8;
  background: var(--bg-terminal);
  max-height: 0;
  padding: 0 16px;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  pointer-events: none;
}

#chat-status-bar.visible {
  max-height: 40px;
  padding: 6px 16px;
  opacity: 1;
}

/* ============================================================
   PIÈCES JOINTES — filename sur images + img-fallback
   ============================================================ */

.attachment-item .filename {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 9px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-item.img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.attachment-item.img-fallback .filename {
  position: static;
  background: transparent;
  color: var(--text-secondary);
  font-size: 10px;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
}

/* ============================================================
   MODE LIGHT — pièces jointes
   ============================================================ */

.light-mode .attachments-preview {
  background: transparent;
}

.light-mode .attachment-item {
  background: #ede6dc;
  border-color: rgba(139, 119, 90, 0.15);
}

.light-mode .attachment-item.pdf svg {
  color: #ef4444;
}

.light-mode .attachment-item.pdf .filename {
  color: #555;
}

.light-mode .attachment-remove {
  background: rgba(0, 0, 0, 0.5);
}

.light-mode .attachment-item .filename {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.5);
}

.light-mode .attachment-item.img-fallback .filename,
.light-mode .attachment-item.pdf .filename,
.light-mode .attachment-item.text-file .filename {
  color: #555;
  background: transparent;
}

.light-mode .attachment-item.text-file svg {
  color: #3a3a3a;
}

/* ============================================================
   DRAG & DROP — overlay
   ============================================================ */

#drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 18, 15, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  pointer-events: none;
}

#drop-overlay.hidden {
  display: none;
}

.drop-overlay-content {
  font-family: var(--font-hub);
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  padding: 24px 48px;
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 16px;
}

.light-mode #drop-overlay {
  background: rgba(244, 237, 228, 0.92);
}

.light-mode .drop-overlay-content {
  color: #2c2c2c;
  border-color: rgba(44, 44, 44, 0.25);
}

/* ============================================================
   BOUTON TOGGLE NUIT — dans la tabs-bar, visible uniquement quand SYS actif
   ============================================================ */

.btn-toggle-night {
  flex-shrink: 0;
  height: 28px;
  padding: 0 8px;
  font-size: 16px;
  font-weight: 500;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: background 0.2s, color 0.2s;
  order: 98; /* Avant Terminal (order 99) */
  margin-left: auto;
}

.btn-toggle-night:hover {
  background: rgba(44, 44, 44, 0.06);
  color: var(--text-primary);
}

.btn-toggle-night.active {
  color: var(--accent);
  background: rgba(44, 44, 44, 0.10);
}

/* ============================================================
   CAPSULE TAILLE POLICE — AA dans la tabs-bar
   ============================================================ */

.font-size-capsule {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(44, 44, 44, 0.08);
  border: 1px solid rgba(44, 44, 44, 0.12);
  margin-left: 4px;
  order: 100; /* Même order que Panel Info (order 100), flexbox les aligne dans l'ordre DOM */
  flex-shrink: 0;
}

.btn-font-dec,
.btn-font-inc {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s, background 0.15s;
}

.btn-font-dec:hover,
.btn-font-inc:hover {
  color: var(--accent);
  background: rgba(44, 44, 44, 0.08);
}

.font-size-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: -0.5px;
  padding: 0 2px;
  user-select: none;
  font-family: var(--font-hub);
}

/* Mode jour — capsule warm */
.light-mode .font-size-capsule {
  background: rgba(139, 119, 90, 0.10);
  border-color: rgba(139, 119, 90, 0.20);
}

.light-mode .btn-font-dec,
.light-mode .btn-font-inc {
  color: #3d3428;
}

.light-mode .btn-font-dec:hover,
.light-mode .btn-font-inc:hover {
  background: rgba(139, 119, 90, 0.15);
}

.light-mode .font-size-label {
  color: #3d3428;
}

/* Mode nuit dans light (light-mode.night-mode) */
.light-mode.night-mode .font-size-capsule {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

.light-mode.night-mode .btn-font-dec,
.light-mode.night-mode .btn-font-inc,
.light-mode.night-mode .font-size-label {
  color: var(--text-secondary);
}

/* ============================================================
   MODE NUIT — vue SYS (chat) en fond sombre
   Actif quand #screen-session a les classes .light-mode ET .night-mode
   Palette : noirs chauds légèrement crème (pas bleu-nuit)
   ============================================================ */

/* Override des variables — teintes chaudes crème, zéro bleu
   .night-mode seul = terminal SYS en mode nuit
   .light-mode.night-mode = friend chat en mode nuit */
.night-mode,
.light-mode.night-mode {
  --bg-terminal: #1a1714;
  --bg-primary: #221f1b;
  --bg-secondary: #2c2722;
  --border: #3c372e;
  --text-primary: #d5d0c6;
  --text-secondary: #918a7c;
  --accent: #d4a574;
  --accent-hover: #e0b88a;
}

/* Header tabs-bar */
.light-mode.night-mode .tabs-bar {
  background: var(--bg-secondary);
  border-bottom-color: var(--border);
}

.light-mode.night-mode .tab {
  color: var(--text-secondary);
}

.night-mode .tab.active {
  border-bottom-color: #3498db;
}

.light-mode.night-mode .tab.active {
  color: var(--accent);
  border-bottom-color: #3498db;
}

.light-mode.night-mode .btn-toggle-mode {
  color: var(--text-secondary);
}

.light-mode.night-mode .btn-toggle-mode.active {
  color: var(--accent);
  background: rgba(212, 165, 116, 0.15);
}

.light-mode.night-mode .tab-settings {
  color: var(--text-secondary);
}

.light-mode.night-mode .tab-add {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.08);
}

.light-mode.night-mode .tab-add:hover,
.light-mode.night-mode .tab-settings:hover,
.light-mode.night-mode .btn-toggle-mode:hover {
  background: rgba(212, 165, 116, 0.1);
  color: var(--accent);
}

.light-mode.night-mode .discourse-card-dot {
  color: #2ecc71;
}

/* Menu settings */
.light-mode.night-mode .settings-menu {
  background: var(--bg-secondary);
  border-color: var(--border);
}

.light-mode.night-mode .settings-menu-item:hover {
  background: rgba(212, 165, 116, 0.1);
}

.light-mode.night-mode .settings-menu-item:active {
  background: rgba(212, 165, 116, 0.2);
}

.light-mode.night-mode .settings-menu-item {
  color: var(--text-primary);
  border-bottom-color: var(--border);
}

/* Session cards night mode */
.light-mode.night-mode .session-card {
  background: var(--bg-secondary);
  border-color: var(--border);
}

.light-mode.night-mode .session-card:hover {
  background: rgba(212, 165, 116, 0.1);
}

.light-mode.night-mode .session-card-name {
  color: #ede8de;
}

.light-mode.night-mode .session-card-info {
  color: var(--text-secondary);
}

.light-mode.night-mode .sessions-header {
  color: var(--text-primary);
}

.light-mode.night-mode .btn-new-session {
  background: var(--accent);
  color: var(--bg-primary);
}

.light-mode.night-mode .btn-session-action {
  color: var(--text-secondary);
  border-color: var(--border);
}

/* Terminal view */
.light-mode.night-mode .terminal-view {
  background: var(--bg-terminal);
}

/* Discourse view — fond sombre */
.light-mode.night-mode .discourse-view {
  background: var(--bg-terminal);
}

/* Cards */
.light-mode.night-mode .discourse-card {
  background: var(--bg-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Nom du speaker */
.light-mode.night-mode .discourse-card-name {
  color: var(--text-primary);
}

/* Contenu de message */
.light-mode.night-mode .discourse-card-content {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* Markdown night-mode : tables, code, blockquotes */
.light-mode.night-mode .discourse-card-claude .discourse-card-content th,
.light-mode.night-mode .discourse-card-claude .discourse-card-content td {
  border-color: var(--border);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content th {
  background: rgba(212, 165, 116, 0.1);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content pre {
  background: rgba(0, 0, 0, 0.2);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content code {
  background: rgba(0, 0, 0, 0.15);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content blockquote {
  border-left-color: var(--border);
  color: var(--text-secondary);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content hr {
  border-top-color: var(--border);
}

.light-mode.night-mode .discourse-card-claude .discourse-card-content a {
  color: #64b5f6;
  text-decoration-color: rgba(100, 181, 246, 0.4);
}

/* Status bar thinking */
.light-mode.night-mode #chat-status-bar {
  background: var(--bg-terminal);
  color: var(--text-secondary);
}

/* Footer control-zone */
.light-mode.night-mode .control-zone {
  background: var(--bg-secondary);
  border-top-color: var(--border);
}

.light-mode.night-mode #text-input {
  background: var(--bg-primary);
  color: var(--text-primary);
  border-color: var(--border);
}

.light-mode.night-mode #text-input::placeholder {
  color: var(--text-secondary);
}

.light-mode.night-mode .btn-escape {
  background: #3a352c;
  color: #d0ccc4;
}

.light-mode.night-mode .btn-escape:hover {
  background: #4a443a;
}

.light-mode.night-mode .btn-retry {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.20);
  color: #d0ccc4;
}

.light-mode.night-mode .btn-retry:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.4);
}

.light-mode.night-mode .btn-attach {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-secondary);
}

.light-mode.night-mode .btn-attach:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.light-mode.night-mode .status-bar {
  background: rgba(255, 167, 38, 0.1);
  color: var(--warning);
  border-bottom-color: var(--border);
}

/* Pièces jointes */
.light-mode.night-mode .attachment-item {
  background: var(--bg-secondary);
  border-color: var(--border);
}

.light-mode.night-mode .attachment-item.pdf svg {
  color: var(--error);
}

.light-mode.night-mode .attachment-item.pdf .filename {
  color: var(--text-secondary);
}

/* Drop overlay */
.light-mode.night-mode #drop-overlay {
  background: rgba(24, 22, 20, 0.85);
}

.light-mode.night-mode .drop-overlay-content {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   LIENS CLIQUABLES (terminal + chat)
   ============================================================ */

#terminal-content a,
.discourse-card-content a {
  color: #64b5f6;
  text-decoration: underline;
  text-decoration-color: rgba(100, 181, 246, 0.4);
  text-underline-offset: 2px;
}

#terminal-content a:active,
.discourse-card-content a:active {
  color: #90caf9;
}

/* Mode SYS jour (light-mode) — les liens discourse sont déjà scopés dans la section markdown ci-dessus */

/* Mode SYS nuit (night-mode) */
.night-mode .discourse-card-content a {
  color: #64b5f6;
  text-decoration-color: rgba(100, 181, 246, 0.4);
}

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

@media (max-width: 768px) {
  .discourse-card {
    max-width: 100%;
    min-width: 180px;
    padding: 10px;
    margin-bottom: 10px;
  }
  .discourse-card-content {
    padding: 8px 10px;
    margin-bottom: 4px;
    font-size: 13px;
  }
  .discourse-view {
    padding: 10px 6px 0;
  }
  .discourse-card-name {
    font-size: 14px;
    margin-bottom: 8px;
  }
  .control-zone {
    padding-top: 10px;
  }
}

/* ============================================================
   RESPONSIVE LANDSCAPE MOBILE
   Réduit les tailles de police en mode paysage sur mobile.
   max-width: 926px = iPhone Pro Max en paysage, exclut les desktops.
   ============================================================ */

@media (orientation: landscape) and (max-width: 926px) {
  html, body {
    font-size: 14px;
  }

  #terminal-content {
    font-size: calc(11px + var(--font-size-delta));
  }

  .discourse-card-content {
    font-size: calc(11px + var(--font-size-delta));
    padding: 8px 10px;
  }

  .discourse-card-name {
    font-size: 12px;
    margin-bottom: 6px;
  }

  .discourse-card {
    padding: 10px;
  }
}

/* Bouton scroll-to-bottom flottant */
.btn-scroll-bottom {
  position: absolute;
  bottom: 90px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 10;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-scroll-bottom:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.btn-scroll-bottom:active {
  transform: translateY(0);
}

/* Night mode */
.light-mode.night-mode .btn-scroll-bottom {
  background: #3a352c;
  color: #d0ccc4;
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.light-mode.night-mode .btn-scroll-bottom:hover {
  background: #4a443a;
}

/* ============================================================
   UTILITAIRES
   ============================================================ */

.hidden {
  display: none !important;
}

/* ============================================================
   PANNEAU INFO — SECTION 6
   ============================================================ */

/* ============================================================
   6.1 — LAYOUT
   ============================================================ */

.session-layout {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

@media (max-width: 768px) {
  .session-layout {
    flex-direction: column;
  }
}

#terminal-view {
  flex: 1;
  min-width: 0;
}

/* ============================================================
   6.2 — PANNEAU DESKTOP
   ============================================================ */

.panel-container {
  width: 600px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  overflow: hidden;
  transition: width 0.25s ease;
}

.panel-container.panel-closed {
  width: 0;
  border-left: none;
  overflow: hidden;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.panel-header--no-title {
  justify-content: flex-end;
  border-bottom: none;
  padding-bottom: 4px;
}

.panel-title {
  font-family: var(--font-hub);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-primary);
}

.panel-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.panel-close:hover {
  background: rgba(44, 44, 44, 0.06);
  color: var(--text-primary);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.panel-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-secondary);
  font-size: 13px;
  font-family: var(--font-hub);
}

.panel-loading {
  text-align: center;
  padding: 2rem;
  color: var(--text-secondary);
}

.panel-offline-indicator {
  font-size: 11px;
  color: var(--error);
  padding: 0 14px 4px;
}

/* ============================================================
   6.2b — HEADER PROJET (card en haut du panneau)
   ============================================================ */

.panel-project-header {
  margin: 4px 14px 12px;
  padding: 16px;
  border: 2px solid rgba(255, 107, 107, 0.4);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.panel-project-name {
  font-family: var(--font-hub);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.2;
}

.panel-project-session {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.6;
  margin-bottom: 8px;
}

.panel-project-summary {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================
   6.3 — BOUTON "PANEL INFO"
   ============================================================ */

.btn-panel-info {
  flex-shrink: 0;
  height: 28px;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-hub);
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, color 0.2s;
  position: relative;
  order: 100;
  margin-left: 4px;
}

.btn-panel-info:hover {
  background: rgba(44, 44, 44, 0.06);
  color: var(--text-primary);
}

.btn-panel-info.panel-is-open {
  color: var(--accent);
  background: rgba(44, 44, 44, 0.08);
}

.panel-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  line-height: 1;
  background: var(--error);
  color: #fff;
  border-radius: 999px;
}

.panel-badge.hidden {
  display: none;
}

/* ============================================================
   6.4 — SECTIONS
   ============================================================ */

.panel-section {
  margin-bottom: 14px;
}

.panel-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--text-secondary);
  transition: background 0.15s;
}

.panel-section-toggle:hover {
  background: rgba(44, 44, 44, 0.04);
}

.panel-section-title {
  font-family: var(--font-hub);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  flex: 1;
}

.panel-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(44, 44, 44, 0.08);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}

.panel-section-chevron {
  font-size: 12px;
  transition: transform 0.2s;
}

.panel-section.collapsed .panel-section-chevron {
  transform: rotate(-90deg);
}

/* FIX DÉFINITIF #320 — NE PAS MODIFIER sans vérifier le rendu panneau
   overflow: hidden seul crée un BFC qui clipe le côté gauche silencieusement
   quand un enfant déborde. On sépare les axes : Y pour l'animation, X pour
   le clipping propre sans scroll. overflow-x: clip (pas hidden) évite le BFC. */
.panel-section-items {
  overflow-y: hidden;
  overflow-x: clip;
  max-height: 1000px;
  transition: max-height 0.25s ease;
}

.panel-section.collapsed .panel-section-items {
  max-height: 0;
}

/* ============================================================
   6.5 — ITEMS
   ============================================================ */

/* FIX #320 — min-width: 0 permet au flex item de se contracter sous sa taille
   intrinsèque et empêche le texte long de forcer un débordement horizontal */
.panel-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 8px 4px;
  min-width: 0;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: 6px;
  transition: background 0.15s, opacity 0.2s;
}

.panel-item:hover {
  background: rgba(44, 44, 44, 0.12);
}

.panel-item-content {
  flex: 1;
  min-width: 0;
}

.panel-item-text {
  font-family: var(--font-hub);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
  word-break: break-word;
  overflow-wrap: break-word;
}

.panel-item-text--info {
  color: var(--text-secondary);
  font-size: 11px;
}

.panel-item-icon {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-right: 4px;
  flex-shrink: 0;
}

.panel-item-actions {
  flex-shrink: 0;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.panel-item:hover .panel-item-actions {
  opacity: 1;
}

.panel-item-archive {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.panel-item-archive:hover {
  background: rgba(44, 44, 44, 0.1);
  color: var(--text-primary);
}

.panel-item--question.panel-item--pending {
  border-left-color: var(--warning);
  background: rgba(176, 125, 42, 0.04);
}

.panel-item--question.panel-item--pending .panel-item-icon {
  color: var(--warning);
}

.panel-item--done {
  opacity: 0.45;
}

.panel-item--archived {
  opacity: 0.6;
}

.panel-item-link {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-hub);
  font-size: 12px;
  word-break: break-word;
}

.panel-item-link:hover {
  text-decoration: underline;
}

/* ============================================================
   6.6 — CHECKLIST
   ============================================================ */

.panel-checklist {
  list-style: none;
  margin-top: 6px;
}

.panel-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 2px 0;
}

.panel-checklist-item label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-family: var(--font-hub);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-primary);
}

.panel-checklist-item input[type="checkbox"] {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--success);
  cursor: pointer;
}

.panel-checklist-item--checked label {
  opacity: 0.5;
  text-decoration: line-through;
}

.panel-item-title {
  font-family: var(--font-hub);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
  margin-bottom: 4px;
}

/* ============================================================
   6.65 — SECTION BACKLOG TO_VERIFY
   ============================================================ */

.panel-section-backlog {
  margin-top: 8px;
}
.panel-section-backlog .panel-section-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
}
.panel-section-backlog .panel-section-title {
  font-family: var(--font-hub);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  flex: 1;
  color: var(--text-secondary);
}
.panel-section-backlog .panel-section-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(44, 44, 44, 0.08);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 20px;
  text-align: center;
}
/* FIX #320 — width: 100% + min-width: 0 contraignent l'item dans le BFC parent
   sans quoi l'item peut déborder horizontalement vers la gauche */
.panel-item--backlog {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-left: 3px solid #ffb74d;
  margin-bottom: 4px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: rgba(255, 183, 77, 0.06);
  border-radius: 0 4px 4px 0;
}
.panel-backlog-number {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  flex-shrink: 0;
  min-width: 35px;
}
/* FIX #320 — min-width: 0 indispensable sur le flex child texte pour que
   overflow-wrap: break-word soit effectif (sans ça le texte déborde) */
.panel-backlog-title {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* ============================================================
   6.66 — BARRE CONTEXTE STICKY
   ============================================================ */

.panel-context-bar {
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-top: 1px solid rgba(139,119,90,0.15);
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: rgba(61, 52, 40, 0.6);
  text-align: center;
}
.panel-context-bar--warning {
  background: #d32f2f;
  color: #fff;
  border-top-color: #d32f2f;
}
.panel-context-bar--critical {
  background: #b71c1c;
  color: #fff;
  font-weight: bold;
  border-top-color: #b71c1c;
}

/* Mode jour — section backlog */
.light-mode .panel-item--backlog {
  background: rgba(255, 152, 0, 0.08);
  border-left-color: #f57c00;
}
.light-mode .panel-backlog-number {
  color: rgba(61, 52, 40, 0.5);
}
.light-mode .panel-backlog-title {
  color: rgba(61, 52, 40, 0.85);
}
/* Mode jour — barre contexte (pas de dépendance à light-mode, le panel est toujours visible) */
.light-mode .panel-context-bar {
  background: #f4ede4;
  border-top-color: rgba(139,119,90,0.15);
  color: rgba(61, 52, 40, 0.6);
}
.light-mode .panel-context-bar--warning {
  background: #d32f2f;
  color: #fff;
  border-top-color: #d32f2f;
}
.light-mode .panel-context-bar--critical {
  background: #b71c1c;
  color: #fff;
  border-top-color: #b71c1c;
}
/* light-mode.night-mode overrides */
.light-mode.night-mode .panel-item--backlog {
  background: rgba(255, 183, 77, 0.06);
  border-left-color: #ffb74d;
}
.light-mode.night-mode .panel-backlog-number {
  color: rgba(255,255,255,0.4);
}
.light-mode.night-mode .panel-backlog-title {
  color: rgba(255,255,255,0.8);
}
.night-mode .panel-context-bar,
.light-mode.night-mode .panel-context-bar {
  background: var(--bg-secondary);
  border-top-color: var(--border);
  color: rgba(213,208,198,0.6);
}
.night-mode .panel-context-bar--warning,
.light-mode.night-mode .panel-context-bar--warning {
  background: #d32f2f;
  color: #fff;
  border-top-color: #d32f2f;
}
.night-mode .panel-context-bar--critical,
.light-mode.night-mode .panel-context-bar--critical {
  background: #b71c1c;
  color: #fff;
  border-top-color: #b71c1c;
}

/* ============================================================
   6.7 — ZONE ARCHIVES
   ============================================================ */

.panel-archives-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 4px;
  margin-top: 8px;
}

.panel-archives-separator::before,
.panel-archives-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.panel-archives-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: 0.4;
  font-family: var(--font-hub);
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.panel-archives-separator--visible .panel-archives-label {
  opacity: 1;
}

.panel-archives-zone {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.panel-archives-zone--open {
  max-height: 1000px;
}

.panel-archives-loading {
  padding: 12px 14px;
  font-family: var(--font-hub);
  font-size: 12px;
  color: var(--text-secondary);
}

.panel-archives-empty {
  padding: 12px 14px;
  font-family: var(--font-hub);
  font-size: 12px;
  color: var(--text-secondary);
  font-style: italic;
}

/* ============================================================
   6.8 — MODE NUIT
   ============================================================ */

/* Neutralise les overrides couleurs dures de la section 6.10 (.light-mode)
   quand le mode nuit est actif simultanément (.light-mode.night-mode) */
.light-mode.night-mode .panel-container {
  background: var(--bg-secondary);
  border-left-color: var(--border);
}

.light-mode.night-mode .panel-header {
  border-bottom-color: var(--border);
}

.light-mode.night-mode .panel-item {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.14);
}

.light-mode.night-mode .panel-section-toggle:hover {
  background: rgba(255, 255, 255, 0.04);
}

.light-mode.night-mode .panel-item:hover {
  background: rgba(255, 255, 255, 0.12);
}

.light-mode.night-mode .panel-close:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
}

.light-mode.night-mode .panel-section-count {
  background: rgba(255, 255, 255, 0.08);
}

.light-mode.night-mode .panel-item-archive:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

.night-mode .btn-panel-info:hover,
.light-mode.night-mode .btn-panel-info:hover { background: rgba(255,255,255,0.06); }
.night-mode .btn-panel-info.panel-is-open,
.light-mode.night-mode .btn-panel-info.panel-is-open { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.night-mode .panel-item--question.panel-item--pending,
.light-mode.night-mode .panel-item--question.panel-item--pending {
  background: rgba(212, 165, 116, 0.06);
  border-left-color: var(--accent);
}

.night-mode .panel-item--question.panel-item--pending .panel-item-icon,
.light-mode.night-mode .panel-item--question.panel-item--pending .panel-item-icon {
  color: var(--accent);
}

.night-mode .panel-archives-separator::before,
.night-mode .panel-archives-separator::after,
.light-mode.night-mode .panel-archives-separator::before,
.light-mode.night-mode .panel-archives-separator::after {
  background: var(--border);
}

.night-mode .panel-checklist-item input[type="checkbox"],
.light-mode.night-mode .panel-checklist-item input[type="checkbox"] {
  accent-color: var(--accent);
}

.night-mode .panel-project-header,
.light-mode.night-mode .panel-project-header {
  border-color: rgba(255, 107, 107, 0.4);
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   6.9 — MODE MOBILE OVERLAY
   ============================================================ */

.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  z-index: 499;
}

@media (max-width: 768px) {
  .panel-container {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 500;
    border-left: none;
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }

  .panel-container.panel-open {
    transform: translateY(0);
  }

  .panel-container.panel-closed {
    width: 100%;
    transform: translateY(100%);
  }

  .session-layout {
    flex-direction: column;
  }

  .panel-header {
    padding: 14px 16px;
    padding-top: max(14px, var(--safe-top));
  }

  .panel-close {
    width: 44px;
    height: 44px;
  }

  .panel-body {
    padding-bottom: max(16px, var(--safe-bottom));
  }

  .panel-item {
    padding: 10px 14px;
    margin: 0 6px 4px;
  }

  .panel-item-actions {
    opacity: 1;
  }

  .panel-item-archive {
    min-width: 44px;
    min-height: 44px;
  }

  .panel-checklist-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }

  .panel-project-header {
    margin: 4px 10px 8px;
    padding: 12px;
  }

  .panel-project-name {
    font-size: 20px;
  }
}

/* ============================================================
   6.10 — LIGHT MODE
   ============================================================ */

.light-mode .panel-container {
  background: #f4ede4;
  border-left-color: rgba(139, 119, 90, 0.12);
}

.light-mode .panel-header {
  border-bottom-color: rgba(139, 119, 90, 0.12);
}

.light-mode .panel-section-toggle:hover {
  background: rgba(44, 44, 44, 0.04);
}

.light-mode .panel-item:hover {
  background: rgba(44, 44, 44, 0.12);
}

.light-mode .btn-panel-info.panel-is-open {
  background: rgba(44, 44, 44, 0.08);
  color: #2c2c2c;
}

.light-mode .panel-project-header {
  border-color: rgba(231, 76, 60, 0.4);
  background: rgba(139, 119, 90, 0.03);
}

/* ============================================================
   ANSI COLORS — ansi_up v6 (use_classes = true)
   Classes produites : ansi-{color}-fg, ansi-{color}-bg
   bold/italic/underline/faint sont en inline styles (comportement ansi_up)
   ============================================================ */

/* Mode jour (--bg-terminal: #f4ede4) — couleurs sobres et lisibles */
#terminal-content .ansi-black-fg        { color: #2c2c2c; }
#terminal-content .ansi-red-fg          { color: #c0392b; }
#terminal-content .ansi-green-fg        { color: #27ae60; }
#terminal-content .ansi-yellow-fg       { color: #b07d2a; }
#terminal-content .ansi-blue-fg         { color: #2980b9; }
#terminal-content .ansi-magenta-fg      { color: #8e44ad; }
#terminal-content .ansi-cyan-fg         { color: #16a085; }
#terminal-content .ansi-white-fg        { color: #888888; }
#terminal-content .ansi-bright-black-fg { color: #666666; }
#terminal-content .ansi-bright-red-fg   { color: #e74c3c; }
#terminal-content .ansi-bright-green-fg { color: #2ecc71; }
#terminal-content .ansi-bright-yellow-fg{ color: #f39c12; }
#terminal-content .ansi-bright-blue-fg  { color: #3498db; }
#terminal-content .ansi-bright-magenta-fg{ color: #9b59b6; }
#terminal-content .ansi-bright-cyan-fg  { color: #1abc9c; }
#terminal-content .ansi-bright-white-fg { color: #2c2c2c; }

/* Couleurs background (mode jour) — légère teinte */
#terminal-content .ansi-black-bg        { background-color: rgba(44, 44, 44, 0.15); }
#terminal-content .ansi-red-bg          { background-color: rgba(192, 57, 43, 0.12); }
#terminal-content .ansi-green-bg        { background-color: rgba(39, 174, 96, 0.12); }
#terminal-content .ansi-yellow-bg       { background-color: rgba(176, 125, 42, 0.12); }
#terminal-content .ansi-blue-bg         { background-color: rgba(41, 128, 185, 0.12); }
#terminal-content .ansi-magenta-bg      { background-color: rgba(142, 68, 173, 0.12); }
#terminal-content .ansi-cyan-bg         { background-color: rgba(22, 160, 133, 0.12); }
#terminal-content .ansi-white-bg        { background-color: rgba(136, 136, 136, 0.12); }
#terminal-content .ansi-bright-black-bg { background-color: rgba(102, 102, 102, 0.15); }
#terminal-content .ansi-bright-red-bg   { background-color: rgba(231, 76, 60, 0.12); }
#terminal-content .ansi-bright-green-bg { background-color: rgba(46, 204, 113, 0.12); }
#terminal-content .ansi-bright-yellow-bg{ background-color: rgba(243, 156, 18, 0.12); }
#terminal-content .ansi-bright-blue-bg  { background-color: rgba(52, 152, 219, 0.12); }
#terminal-content .ansi-bright-magenta-bg{ background-color: rgba(155, 89, 182, 0.12); }
#terminal-content .ansi-bright-cyan-bg  { background-color: rgba(26, 188, 156, 0.12); }
#terminal-content .ansi-bright-white-bg { background-color: rgba(44, 44, 44, 0.08); }

/* Mode nuit (--bg-terminal: #1a1714) — couleurs plus vives */
/* ANSI light-mode overrides — fond beige #f4ede4, contraste renforcé */
.light-mode #terminal-content .ansi-white-fg        { color: #5a5550; }
.light-mode #terminal-content .ansi-blue-fg         { color: #1a5a8a; }
.light-mode #terminal-content .ansi-cyan-fg         { color: #0e7a65; }
.light-mode #terminal-content .ansi-green-fg        { color: #1a8a4a; }
.light-mode #terminal-content .ansi-bright-blue-fg  { color: #1e6fa0; }
.light-mode #terminal-content .ansi-bright-cyan-fg  { color: #11806d; }
.light-mode #terminal-content .ansi-bright-green-fg { color: #1d9e55; }
.light-mode #terminal-content .ansi-bright-yellow-fg{ color: #9a6c1a; }
.light-mode #terminal-content .ansi-bright-white-fg { color: #3a3632; }

.night-mode #terminal-content .ansi-black-fg        { color: #555555; }
.night-mode #terminal-content .ansi-red-fg          { color: #e74c3c; }
.night-mode #terminal-content .ansi-green-fg        { color: #2ecc71; }
.night-mode #terminal-content .ansi-yellow-fg       { color: #f39c12; }
.night-mode #terminal-content .ansi-blue-fg         { color: #3498db; }
.night-mode #terminal-content .ansi-magenta-fg      { color: #9b59b6; }
.night-mode #terminal-content .ansi-cyan-fg         { color: #1abc9c; }
.night-mode #terminal-content .ansi-white-fg        { color: #d5d0c6; }
.night-mode #terminal-content .ansi-bright-black-fg { color: #888888; }
.night-mode #terminal-content .ansi-bright-red-fg   { color: #ff6b6b; }
.night-mode #terminal-content .ansi-bright-green-fg { color: #55efc4; }
.night-mode #terminal-content .ansi-bright-yellow-fg{ color: #fdcb6e; }
.night-mode #terminal-content .ansi-bright-blue-fg  { color: #74b9ff; }
.night-mode #terminal-content .ansi-bright-magenta-fg{ color: #a29bfe; }
.night-mode #terminal-content .ansi-bright-cyan-fg  { color: #81ecec; }
.night-mode #terminal-content .ansi-bright-white-fg { color: #ffffff; }

/* Couleurs background (mode nuit) */
.night-mode #terminal-content .ansi-black-bg        { background-color: rgba(85, 85, 85, 0.2); }
.night-mode #terminal-content .ansi-red-bg          { background-color: rgba(231, 76, 60, 0.2); }
.night-mode #terminal-content .ansi-green-bg        { background-color: rgba(46, 204, 113, 0.2); }
.night-mode #terminal-content .ansi-yellow-bg       { background-color: rgba(243, 156, 18, 0.2); }
.night-mode #terminal-content .ansi-blue-bg         { background-color: rgba(52, 152, 219, 0.2); }
.night-mode #terminal-content .ansi-magenta-bg      { background-color: rgba(155, 89, 182, 0.2); }
.night-mode #terminal-content .ansi-cyan-bg         { background-color: rgba(26, 188, 156, 0.2); }
.night-mode #terminal-content .ansi-white-bg        { background-color: rgba(213, 208, 198, 0.15); }
.night-mode #terminal-content .ansi-bright-black-bg { background-color: rgba(136, 136, 136, 0.2); }
.night-mode #terminal-content .ansi-bright-red-bg   { background-color: rgba(255, 107, 107, 0.2); }
.night-mode #terminal-content .ansi-bright-green-bg { background-color: rgba(85, 239, 196, 0.2); }
.night-mode #terminal-content .ansi-bright-yellow-bg{ background-color: rgba(253, 203, 110, 0.2); }
.night-mode #terminal-content .ansi-bright-blue-bg  { background-color: rgba(116, 185, 255, 0.2); }
.night-mode #terminal-content .ansi-bright-magenta-bg{ background-color: rgba(162, 155, 254, 0.2); }
.night-mode #terminal-content .ansi-bright-cyan-bg  { background-color: rgba(129, 236, 236, 0.2); }
.night-mode #terminal-content .ansi-bright-white-bg { background-color: rgba(255, 255, 255, 0.1); }

/* ============================================================
   DELTA TAILLE POLICE — appliqué en dernier pour override les media queries
   ============================================================ */

#terminal-content {
  font-size: calc(13px + var(--font-size-delta));
}

.discourse-card-content {
  font-size: calc(13px + var(--font-size-delta));
}

.discourse-card-name {
  font-size: calc(16px + var(--font-size-delta));
}

.panel-item-text {
  font-size: calc(12px + var(--font-size-delta));
}

.panel-item-text--info {
  font-size: calc(11px + var(--font-size-delta));
}

.panel-context-bar {
  font-size: calc(22px + var(--font-size-delta));
}

/* ============================================================
   BUG #447 — Bouton fermer (×) dans les onglets
   ============================================================ */

.tab {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tab-close-btn {
  font-size: 16px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
  user-select: none;
}

.tab-close-btn:hover {
  color: #e0e0e0;
  background: rgba(255, 255, 255, 0.12);
}

.tab.active .tab-close-btn {
  color: #888;
}

.tab.active .tab-close-btn:hover {
  color: #e0e0e0;
}