/* ===== Variables de thème ===== */
:root {
  /* Thème clair (défaut) */
  --bg: #f0f2f5;
  --bg-secondary: #f5f6f8;
  --surface: #ffffff;
  --border: #e2e4e8;
  --text: #1a1d23;
  --text-secondary: #6b7280;
  --muted: #5c6370;
  --nav-height: 64px;
  --main-padding: 1.5rem;
  --page-padding: 24px;

  /* Accent principal — dégradé signature bleu-violet */
  --accent: #667eea;
  --accent-hover: #5a6fd6;
  --accent-end: #764ba2;
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-primary-subtle: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
  --accent-shadow: rgba(102, 126, 234, 0.35);
  --accent-glow: rgba(102, 126, 234, 0.15);

  /* Sémantiques */
  --link: #667eea;
  --danger: #dc2626;
  --danger-hover: #b91c1c;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-shadow: rgba(220, 38, 38, 0.3);
  --warning: #ca8a04;
  --warning-hover: #b45309;
  --warning-bg: #fffbeb;
  --warning-border: #fcd34d;
  --success: #16a34a;
  --success-hover: #059669;
  --success-bg: #ecfdf5;
  --success-border: #a7f3d0;

  /* Priorités (1-10 : vert → jaune → rouge) */
  --prio-1: #44ff00;
  --prio-2: #77ff00;
  --prio-3: #aaff00;
  --prio-4: #ddff00;
  --prio-5: #ffff00;
  --prio-6: #ffcc00;
  --prio-7: #ff9900;
  --prio-8: #ff6600;
  --prio-9: #ff3300;
  --prio-10: #ff0000;

  /* Priorités UI (icônes dropdowns, 1-10 : vert → rouge) */
  --prio-ui-1: #4caf50;
  --prio-ui-2: #66bb6a;
  --prio-ui-3: #8bc34a;
  --prio-ui-4: #cddc39;
  --prio-ui-5: #ffeb3b;
  --prio-ui-6: #ffc107;
  --prio-ui-7: #ff9800;
  --prio-ui-8: #ff5722;
  --prio-ui-9: #f44336;
  --prio-ui-10: #d32f2f;

  /* Palette de tags (12 couleurs cycliques) */
  --tag-1: #e06c75;
  --tag-2: #d19a66;
  --tag-3: #e5c07b;
  --tag-4: #98c379;
  --tag-5: #56b6c2;
  --tag-6: #61afef;
  --tag-7: #c678dd;
  --tag-8: #be5046;
  --tag-9: #5c6370;
  --tag-10: #abb2bf;
  --tag-11: #7c9ce0;
  --tag-12: #8ab4f8;
}

[data-theme="dark"] {
  --bg: #1a1d23;
  --bg-secondary: #2a2e36;
  --surface: #242830;
  --border: #3d4452;
  --text: #e6e9ef;
  --text-secondary: #9096a3;
  --muted: #9096a3;

  /* Accent */
  --accent: #7c9ce0;
  --accent-hover: #92b0eb;
  --accent-end: #a07ed6;
  --gradient-primary: linear-gradient(135deg, #7c9ce0 0%, #a07ed6 100%);
  --gradient-primary-subtle: linear-gradient(135deg, rgba(124, 156, 224, 0.2) 0%, rgba(160, 126, 214, 0.2) 100%);
  --accent-shadow: rgba(124, 156, 224, 0.35);
  --accent-glow: rgba(124, 156, 224, 0.15);

  /* Sémantiques */
  --link: #8ab4f8;
  --danger: #e06c75;
  --danger-hover: #c75a63;
  --danger-bg: rgba(220, 38, 38, 0.1);
  --danger-border: rgba(220, 38, 38, 0.3);
  --danger-shadow: rgba(224, 108, 117, 0.3);
  --warning: #e5c07b;
  --warning-hover: #d4a84e;
  --warning-bg: rgba(252, 211, 77, 0.1);
  --warning-border: rgba(252, 211, 77, 0.3);
  --success: #98c379;
  --success-hover: #7daa62;
  --success-bg: rgba(5, 150, 105, 0.12);
  --success-border: rgba(5, 150, 105, 0.3);
}

/* ===== Reset & Base ===== */
* { box-sizing: border-box; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Shell connecté : pas de scroll sur tout le document — scroll dans les colonnes */
body.has-app-shell {
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}

html {
  height: 100%;
}

html:has(body.has-app-shell) {
  overflow: hidden;
  height: 100%;
  max-height: 100%;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ===== Système de boutons unifié ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Primary — dégradé signature */
.btn-primary {
  background: var(--gradient-primary);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-shadow);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Secondary — bordure subtile */
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--text-secondary);
}

/* Ghost — minimal */
.btn-ghost {
  background: transparent;
  color: var(--muted);
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text);
  background: var(--bg-secondary);
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-outline-danger {
  background: var(--bg-primary);
  color: var(--danger);
  border-color: var(--danger);
}

.btn-outline-danger:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

/* Danger */
.btn-danger {
  background: var(--danger);
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--danger-shadow);
}

.btn-danger:active:not(:disabled) {
  transform: translateY(0);
}

.btn-danger-ghost {
  background: none;
  color: var(--muted);
  border: none;
}

.btn-danger-ghost:hover:not(:disabled) {
  color: var(--danger);
  background: none;
}

/* Accent — accent solide (non dégradé, pour actions secondaires "colorées") */
.btn-accent {
  background: var(--accent);
  color: white;
}

.btn-accent:hover:not(:disabled) {
  background: var(--accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--accent-shadow);
}

/* Tailles */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  border-radius: 6px;
}

.btn-lg {
  padding: 0.875rem 1.5rem;
  font-size: 0.95rem;
  border-radius: 10px;
}

.btn-block {
  display: flex;
  width: 100%;
  user-select: none;
  -webkit-user-select: none;
}


.btn-icon-only {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary);
}

.btn-icon-only:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.btn-icon-only.btn-icon-danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}


.btn-icon-tiny {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.15s;
  text-decoration: none;
  flex-shrink: 0;
}
.btn-icon-tiny:hover {
  color: var(--accent, #6366f1);
  background: var(--accent-shadow, rgba(99, 102, 241, 0.08));
}

/* ===== Header / Navigation ===== */
.app-nav {
  flex-shrink: 0;
  height: var(--nav-height);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

/* Burger button — hidden on desktop, shown on mobile */
.burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  color: var(--text);
  flex-shrink: 0;
}

.burger-btn:hover {
  background: var(--bg-secondary);
}

/* Mobile drawer */
.mobile-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 299;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.mobile-drawer-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.mobile-drawer {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85vw;
  background: var(--surface);
  z-index: 300;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
}

.mobile-drawer.open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2);
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid var(--border);
}

.mobile-drawer-user {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.mobile-drawer-user strong {
  font-size: 0.95rem;
  color: var(--text);
}

.mobile-drawer-user span {
  font-size: 0.8rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-drawer-nav {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  flex: 1;
}

.mobile-drawer-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.mobile-drawer-link:hover {
  background: var(--bg-secondary);
}

.mobile-drawer-link.active {
  color: var(--accent);
  background: var(--accent-alpha, rgba(102, 126, 234, 0.08));
  font-weight: 500;
}

.mobile-drawer-footer {
  border-top: 1px solid var(--border);
  padding: 0.5rem 0;
}

.mobile-drawer-danger {
  color: var(--danger) !important;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.header-nav nav {
  display: flex;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .burger-btn {
    display: flex;
  }

  .mobile-drawer-backdrop {
    display: block;
  }

  .mobile-drawer {
    display: flex;
  }

  .header-nav {
    display: none;
  }
}

.app-title {
  margin: 0;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.gemini-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent);
}

.header-sep {
  color: var(--muted);
  margin: 0 0.5rem;
  font-weight: 400;
  user-select: none;
}

.header-title-link {
  color: inherit;
  text-decoration: none;
}

.header-title-link:hover {
  color: var(--accent);
  text-decoration: none;
}

.nav-link {
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0.9rem 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
}

.nav-link-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.nav-link:hover,
.nav-link.active {
  color: var(--accent);
  background: rgba(124, 156, 224, 0.12);
  text-decoration: none;
}

.nav-unread-badge {
  position: absolute;
  top: 0.1rem;
  right: 0.15rem;
  transform: translate(45%, -45%);
  background: #ef4444;
  color: #fff;
  border-radius: 999px;
  min-width: 14px;
  height: 14px;
  padding: 0 0.22rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--surface);
}

/* ===== Avatar Menu ===== */
.avatar-menu-wrapper {
  position: relative;
}

.avatar-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 24px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text);
}

.avatar-trigger:hover {
  background: var(--bg-secondary);
  border-color: var(--border);
}

.avatar-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar-circle-lg {
  width: 40px;
  height: 40px;
}

.avatar-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar-chevron {
  color: var(--muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.avatar-chevron.open {
  transform: rotate(180deg);
}

/* Dropdown menu */
.avatar-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  padding: 0.5rem;
  z-index: 1000;
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  pointer-events: none;
  transition: all 0.15s ease;
}

.avatar-dropdown.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

[data-theme="dark"] .avatar-dropdown {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.avatar-dropdown-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.625rem 0.75rem;
}

.avatar-dropdown-user {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.avatar-dropdown-user strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-dropdown-user span {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar-dropdown-divider {
  height: 1px;
  margin: 0.25rem 0.5rem;
  background: var(--border);
}

.avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.6rem 0.625rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.12s ease;
  line-height: 1.4;
}

.avatar-dropdown-item:hover {
  background: var(--bg-secondary);
  text-decoration: none;
}

.avatar-dropdown-item svg {
  flex-shrink: 0;
  color: var(--muted);
}

.avatar-dropdown-item:hover svg {
  color: var(--accent);
}

.avatar-dropdown-danger {
  color: var(--danger);
}

.avatar-dropdown-danger:hover {
  background: var(--danger-bg);
}

.avatar-dropdown-danger svg {
  color: var(--danger) !important;
}

/* Theme toggle in dropdown */
.icon-sun-menu { display: inline-flex; }
.icon-moon-menu { display: none; }
.theme-label-light { display: inline; }
.theme-label-dark { display: none; }

[data-theme="dark"] .icon-sun-menu { display: none; }
[data-theme="dark"] .icon-moon-menu { display: inline-flex; }
[data-theme="dark"] .theme-label-light { display: none; }
[data-theme="dark"] .theme-label-dark { display: inline; }

/* ===== Main Content ===== */
au-viewport {
  display: block;
}

main {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--main-padding);
  padding-top: calc(var(--nav-height) + var(--main-padding));
}

/* Shell applicatif (sidebar) : plus de topbar fixe */
main.app-main {
  max-width: none;
  margin: 0;
  padding: var(--main-padding);
  padding-top: var(--main-padding);
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 5000;
  overflow-y: auto;
  padding: 2rem 1rem;
}

.modal-content {
  background: var(--surface);
  border-radius: 8px;
  padding: 1.5rem;
  min-width: 350px;
  max-width: 90vw;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.modal-content h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
}

.modal-content .form-group {
  margin-bottom: 1rem;
}

.modal-content .form-group label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--muted);
}

.modal-content .form-group input,
.modal-content .form-group select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  background: var(--surface);
  color: var(--text);
}

.modal-content .form-group input:focus,
.modal-content .form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* btn-cancel et btn-create supprimés — remplacés par .btn .btn-secondary / .btn .btn-primary */

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

/* api-secret-input dans les modales : label + aide au-dessus, champ pleine largeur (évite l’input collé à droite si la description est longue) */
.modal-content .api-key-row {
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0;
  border-bottom: none;
  margin-bottom: 0.75rem;
}

.modal-content .api-key-info {
  min-width: 0;
  max-width: 100%;
}

.modal-content .api-key-input-wrapper {
  flex: none;
  max-width: none;
  width: 100%;
}

.modal-header h2 {
  margin: 0;
  font-size: 1.25rem;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--muted);
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.modal-close-btn:hover {
  background: var(--bg-secondary);
  color: var(--text);
}

.version-loading,
.version-error,
.version-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
}

.version-error {
  color: var(--danger);
}

.version-empty-hint {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.5rem;
}

.version-browser {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
}

/* Navigation */
.version-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

/* nav-btn supprimé — remplacé par .btn .btn-sm .btn-secondary */

.version-counter {
  font-weight: 600;
  color: var(--text);
}

/* Version info */
.version-info {
  padding: 0.75rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border-left: 4px solid var(--accent);
}

.version-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}

.version-date {
  font-weight: 500;
}

.version-trigger {
  font-size: 0.85rem;
  padding: 0.2rem 0.5rem;
  background: var(--bg);
  border-radius: 4px;
}

.version-description {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted);
  font-style: italic;
}

/* Preview */
.version-preview {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
  max-height: 350px;
}

.version-preview h3 {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  color: var(--muted);
}

.preview-section {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.preview-section:last-child {
  border-bottom: none;
}

.preview-section label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 0.35rem;
}

.preview-value {
  font-size: 0.9rem;
  color: var(--text);
}

.preview-text {
  white-space: pre-wrap;
  max-height: 100px;
  overflow-y: auto;
  background: var(--bg-secondary);
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.85rem;
}

.preview-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
}

.preview-list li {
  margin-bottom: 0.25rem;
}

/* Actions */
.version-actions {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
}

/* btn-restore supprimé — remplacé par .btn .btn-primary .btn-lg */

/* Version history button in subject detail */
.btn-history {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-history:hover {
  background: var(--bg-secondary);
  border-color: var(--accent);
  color: var(--accent);
}

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

/* ============================================
   AUTHENTIFICATION
   ============================================ */

/* Auth layout */
main.auth-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
  background: var(--gradient-primary);
}

/* Auth page container */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 60px);
  padding: 2rem;
}

main.auth-layout .auth-page {
  min-height: auto;
}

/* Auth card */
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  padding: 2.5rem;
}

[data-theme="dark"] .auth-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

/* Auth header */
.auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-header h1 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}

.auth-header p {
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Auth form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.form-group input {
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 1rem;
  background: var(--surface);
  color: var(--text);
  transition: all 0.2s ease;
}

.form-group input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group input::placeholder {
  color: var(--muted);
}

.form-hint {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
}

/* Auth error */
.auth-error {
  padding: 1rem;
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  border-radius: 8px;
  color: var(--danger);
  font-size: 0.9rem;
}

.error-list {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
  font-size: 0.85rem;
}

/* Auth warning (email not verified) */
.auth-warning {
  padding: 1.5rem;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: 12px;
  text-align: center;
}

.auth-warning h3 {
  margin: 0 0 0.5rem;
  color: var(--warning-hover);
  font-size: 1.1rem;
}

.auth-warning p {
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.auth-warning .btn-secondary {
  margin-top: 1rem;
}

.auth-error-box {
  text-align: center;
  padding: 2rem 1rem;
}

.auth-error-box h2 {
  color: var(--danger);
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.auth-error-box p {
  color: var(--muted);
  margin: 0 0 1rem;
}

/* Auth success */
.auth-success {
  text-align: center;
  padding: 1rem 0;
}

.auth-success .success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--success), var(--success-hover));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: white;
}

.auth-success h2 {
  font-size: 1.5rem;
  color: var(--text);
  margin: 0 0 0.75rem;
}

.auth-success p {
  color: var(--muted);
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.auth-success .btn-primary,
.auth-success .btn-secondary {
  margin-top: 1.5rem;
}

/* Loading spinner */
.auth-loading {
  text-align: center;
  padding: 3rem 1rem;
}

.auth-loading .spinner {
  width: 40px;
  height: 40px;
  margin: 0 auto 1rem;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Buttons (auth pages) — surcharges pour layout full-width */
.auth-card .btn-primary,
.auth-card .btn-secondary,
.auth-card .btn-danger {
  display: block;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.auth-card .btn-primary {
  background: var(--gradient-primary);
  color: white;
  border: none;
}

.auth-card .btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--accent-shadow);
}

.auth-card .btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.auth-card .btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.auth-card .btn-secondary {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.auth-card .btn-secondary:hover {
  background: var(--bg-secondary);
  color: var(--text);
  border-color: var(--text-secondary);
}

/* Auth links */
.auth-links {
  text-align: center;
}

.auth-links a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.auth-links a:hover {
  text-decoration: underline;
}

/* Divider */
.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1rem;
}

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

.auth-divider span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* OAuth buttons */
.btn-oauth {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.875rem 1.5rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-oauth:hover:not(:disabled) {
  background: var(--bg-secondary);
  border-color: var(--accent);
}

.btn-oauth:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Auth footer */
.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.auth-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.auth-footer a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.auth-footer a:hover {
  text-decoration: underline;
}

/* Login button (when not authenticated) */
.btn-login {
  padding: 0.5rem 1rem;
  background: var(--gradient-primary);
  color: white;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.15s ease;
}

.btn-login:hover {
  box-shadow: 0 2px 8px var(--accent-shadow);
  text-decoration: none;
}

/* ============================================
   2FA SETUP
   ============================================ */

.tfa-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tfa-info {
  text-align: center;
  padding: 1rem 0;
}

.tfa-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.tfa-info h3 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
  color: var(--text);
}

.tfa-info p {
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}

.tfa-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.tfa-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-number {
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.step-content h4 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  color: var(--text);
}

.step-content p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.qr-code-container {
  text-align: center;
  padding: 1rem;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.qr-code {
  max-width: 200px;
  height: auto;
}

.secret-manual {
  text-align: center;
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.secret-manual p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.secret-code {
  display: block;
  font-family: monospace;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 0.5rem;
  word-break: break-all;
}

/* btn-small supprimé — remplacé par .btn .btn-sm .btn-secondary */

.tfa-input {
  width: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-family: monospace;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
}

.tfa-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.backup-codes-container {
  padding: 1.5rem;
  background: var(--bg-secondary);
  border-radius: 12px;
  text-align: center;
}

.backup-codes-container h4 {
  margin: 0 0 0.5rem;
  color: var(--text);
}

.backup-codes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.backup-code {
  font-family: monospace;
  font-size: 0.9rem;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.tfa-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tfa-disable-form {
  padding: 1.5rem;
  background: var(--danger-bg);
  border-radius: 12px;
  border: 1px solid var(--danger-border);
}

.tfa-disable-form h4 {
  margin: 0 0 1rem;
  color: var(--danger);
}

.auth-card .btn-danger {
  background: var(--danger);
  color: white;
  border: none;
}

.auth-card .btn-danger:hover:not(:disabled) {
  background: var(--danger-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--danger-shadow);
}

.auth-card .btn-danger:active:not(:disabled) {
  transform: translateY(0);
}

.auth-card .btn-danger:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Passkey button on login */
.btn-google {
  margin-top: 0;
}

.btn-passkey {
  margin-top: 0.5rem;
}

.btn-passkey svg {
  color: var(--accent);
}

/* Auth card wide (passkeys / 2FA management) */
.auth-card-wide {
  max-width: 560px;
}

/* ============================================
   PASSKEYS PAGE
   ============================================ */

/* Header */
.passkeys-header {
  text-align: center;
  margin-bottom: 2rem;
}

.passkeys-header-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
  color: var(--accent);
}

[data-theme="dark"] .passkeys-header-icon {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.2) 0%, rgba(118, 75, 162, 0.2) 100%);
}

.passkeys-header h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}

.passkeys-header p {
  color: var(--muted);
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto;
}

/* Success banner */
.passkeys-success-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 0.9rem;
  font-weight: 500;
  border: 1px solid var(--success-border);
  animation: passkeys-slide-in 0.3s ease;
}

@keyframes passkeys-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Content wrapper */
.passkeys-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Empty state */
.passkeys-empty-state {
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: var(--bg-secondary);
  border: 1px dashed var(--border);
}

[data-theme="dark"] .passkeys-empty-state {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.1);
}

.passkeys-empty-illustration {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
  color: var(--accent);
}

[data-theme="dark"] .passkeys-empty-illustration {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.passkeys-empty-state h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem 0;
}

.passkeys-empty-state p {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto;
}

/* Passkeys list */
.passkeys-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.passkeys-list-header {
  padding: 0 0.25rem;
  margin-bottom: 0.25rem;
}

.passkeys-count {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  transition: all 0.2s ease;
}

.passkey-item:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}

[data-theme="dark"] .passkey-item:hover {
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.15);
}

.passkey-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.passkey-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--gradient-primary-subtle);
  color: var(--accent);
}

.passkey-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.passkey-details strong {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.passkey-meta {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.passkey-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

/* btn-icon et passkeys-add-btn supprimés — remplacés par .btn-icon-only et .btn .btn-primary .btn-lg .btn-block */

/* Loading */
.passkeys-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.passkeys-loading-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: passkeys-spin 0.6s linear infinite;
}

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

/* Navigation footer */
.passkeys-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.passkeys-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.875rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: all 0.15s ease;
}

.passkeys-nav-link:hover {
  background: var(--bg-secondary);
  color: var(--accent);
  text-decoration: none;
}

[data-theme="dark"] .passkeys-nav-link:hover {
  background: rgba(255, 255, 255, 0.06);
}

.passkeys-nav-link svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.passkeys-nav-link:hover svg {
  opacity: 1;
}

/* ============================================
   SETTINGS PAGE
   ============================================ */

.settings-page {
  display: flex;
  min-height: calc(100vh - 2 * var(--main-padding));
  width: 100%;
  max-width: none;
  margin: 0;
}

body.has-app-shell .settings-page {
  min-height: 0;
  flex: 1 1 0%;
  align-self: stretch;
  width: 100%;
  max-width: none;
  overflow: hidden;
}

/* Anti-flicker: when a route is immediately denied, hide viewport until redirect finishes. */
body.route-access-blocked .app-viewport-host {
  visibility: hidden;
}

/** Avec `body.shell-workspace-scroll` : un seul scroll (workspace), rail + contenu visibles en entier. */
body.has-app-shell.shell-workspace-scroll .settings-page {
  overflow: visible;
  min-height: min-content;
  flex: 0 0 auto;
  height: auto;
  max-height: none;
}

body.has-app-shell.shell-workspace-scroll .settings-sidebar {
  overflow: visible;
}

body.has-app-shell.shell-workspace-scroll .settings-content {
  overflow: visible;
}

body.has-app-shell.shell-workspace-scroll .settings-nav {
  position: static;
}

/* Sidebar secondaire (même logique que la sidebar app, fond gris) */
.settings-sidebar {
  width: var(--app-sidebar-width, 212px);
  flex-shrink: 0;
  padding: 0.35rem 0.4rem 0.75rem;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.settings-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: sticky;
  top: 0;
  padding-top: 0.35rem;
}

.settings-nav-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.75rem 0.75rem;
}

.settings-nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem;
  width: 100%;
  padding: 0.38rem 0.45rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  text-align: left;
}

.settings-nav-item:hover {
  background: var(--surface);
}

.settings-nav-item.active {
  background: var(--gradient-primary-subtle);
  color: var(--accent);
  font-weight: 600;
}

.settings-sidebar .settings-nav-item .app-nav-rail-cell {
  color: var(--muted);
}

.settings-sidebar .settings-nav-item.active .app-nav-rail-cell {
  color: var(--accent);
}

.settings-nav-item svg {
  flex-shrink: 0;
  color: inherit;
}

.settings-nav-item.active svg {
  color: var(--accent);
}

/* Content — pleine largeur dans la zone utile */
.settings-content {
  flex: 1;
  min-width: 0;
  padding: 1rem var(--main-padding) 1.5rem 1.25rem;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
}

/* Cards */
.settings-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 1rem;
}

.settings-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  border-radius: 11px 11px 0 0;
}

[data-theme="dark"] .settings-card-header {
  background: rgba(255, 255, 255, 0.02);
}

.settings-card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-card-header-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.settings-card-header h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Variante : le bandeau de carte est directement un titre (ex. stats/settings). */
.settings-card-header:is(h1, h2, h3, h4) {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- Page Finance (réglages + transactions) ---- */
.finance-col-revolut {
  min-width: 200px;
  vertical-align: middle;
}

.finance-revolut-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.finance-revolut-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.finance-revolut-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  white-space: nowrap;
}

.finance-revolut-status--off {
  color: var(--text-muted);
}

.finance-revolut-status--err {
  color: #b45309;
}

.finance-property-select {
  font-size: 0.75rem !important;
  line-height: 1.2;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.finance-btn-sync {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Contenu projeté du split-dropdown-button : une seule racine (souvent un span) */
.finance-btn-sync-main-inner {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.finance-btn-sync-main-inner > * {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  line-height: 1.2;
}

/* Icône sync : taille légèrement réduite, bloc pour un alignement propre en flex */
.finance-btn-sync-ico {
  flex-shrink: 0;
  display: block;
  width: 13px;
  height: 13px;
  line-height: 0;
  opacity: 0.95;
}

/* Centrage de rotation sur la boîte de l’élément SVG (évite le « wobble ») */
svg.finance-btn-sync-ico.spin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.finance-col-actions {
  width: 44px;
  text-align: right;
}

.btn-icon-tiny--danger:hover:not(:disabled) {
  color: var(--danger, #dc2626);
}

.finance-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.finance-status-dot--ok {
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
}

.finance-status-dot--off {
  background: #9ca3af;
  opacity: 1;
}

.finance-revolut-status--err .finance-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.22);
}

.finance-entity-name {
  font-weight: 500;
  display: block;
}

.finance-entity-legal {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.finance-entity-id {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.65rem;
  color: var(--text-muted);
  font-family: ui-monospace, monospace;
  margin-top: 2px;
}

.finance-import-summary {
  margin-top: 10px;
  font-size: 0.8rem;
  line-height: 1.45;
}

.finance-unit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.finance-unit-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color, rgba(127, 127, 127, 0.35));
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.74rem;
  line-height: 1.2;
  background: var(--panel-bg-soft, rgba(127, 127, 127, 0.08));
}

@media (max-width: 768px) {
  /* Bordure du conteneur seulement : les « cartes » lignes gardent leur bordure (tbody tr). */
  .ce-table-wrap.finance-pu-table-wrap {
    border: none;
    box-shadow: none;
  }

  .finance-pu-table-wrap {
    overflow: visible;
    border: none;
    background: transparent;
  }

  .finance-pu-table thead {
    display: none;
  }

  .finance-pu-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.65rem;
    background: var(--surface);
  }

  .finance-pu-table tbody td {
    display: block;
    width: 100% !important;
    border-bottom: none;
    padding: 0.45rem 0;
  }

  .finance-pu-table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    margin-bottom: 0.28rem;
  }

  .finance-pu-table .finance-property-select {
    width: 100%;
    max-width: 100%;
  }
}

.finance-inline-actions {
  margin-top: 12px;
}

.finance-gmail-help a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.finance-gmail-help a:hover {
  text-decoration-thickness: 2px;
}

.finance-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.88em;
  padding: 0 0.2em;
  border-radius: 3px;
  background: var(--panel-bg-soft, rgba(127, 127, 127, 0.12));
}

.finance-account-actions {
  vertical-align: middle;
}

.finance-account-actions-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 32px;
}

.finance-account-actions-empty {
  font-size: 0.95rem;
  line-height: 1;
}

.finance-sync-split {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  vertical-align: middle;
}

.finance-sync-split .finance-btn-sync {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
}

.finance-sync-split .btn:hover:not(:disabled),
.finance-sync-split .btn:focus-visible {
  transform: none !important;
}

.finance-btn-sync-more {
  min-width: 26px;
  min-height: 30px;
  padding: 0 0.35rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 1px solid color-mix(in srgb, #ffffff 40%, transparent);
}

.finance-sync-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 8;
  min-width: 180px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.15);
  padding: 0.2rem;
}

/* Panneau flottant des split-dropdown-button (au-dessus sidebar paramètres, overflow, etc.) */
.finance-sync-menu.split-dropdown-panel {
  position: fixed;
  right: auto;
  z-index: 10050;
  overflow-y: auto;
}

.split-dropdown-button.split-dropdown--primary .finance-btn-sync-more {
  border-left: 1px solid color-mix(in srgb, #ffffff 40%, transparent);
}

.split-dropdown-button.split-dropdown--secondary .finance-btn-sync-more {
  border-left: 1px solid var(--border);
}

.finance-sync-menu-heading {
  margin: 0.35rem 0 0.15rem;
  padding: 0.2rem 0.45rem 0;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, color-mix(in srgb, var(--text) 55%, transparent));
  border-top: 1px solid var(--border);
}

.finance-sync-menu-heading:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.finance-sync-menu-item {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 0.4rem 0.45rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.finance-sync-menu-item:hover:not(:disabled) {
  background: var(--bg-secondary);
}

.finance-sync-menu-item-danger {
  color: var(--danger);
}

.finance-sync-menu-item-danger:hover:not(:disabled) {
  background: var(--danger-bg);
}

.finance-tx-last-sync {
  margin: 0 0 0.65rem;
  font-size: 0.85rem;
  line-height: 1.35;
}

.finance-tx-error {
  margin: 0 0 12px;
}

.finance-tx-empty {
  padding: 1.75rem 1.25rem;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: var(--bg-secondary);
  max-width: 36rem;
}

.finance-tx-empty__title {
  font-weight: 600;
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.finance-tx-empty__lead {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.finance-tx-empty__list {
  margin: 0 0 1rem;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.55;
}

.finance-tx-empty__link {
  display: inline-flex;
}

.finance-tx-table-wrap {
  position: relative;
}

.finance-tx-filters-inline {
  margin: 0 0 0.7rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}

.finance-tx-filters-search-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.finance-tx-filters-search-row .finance-tx-search-input {
  flex: 1 1 0;
  min-width: 0;
  display: block;
}

.finance-tx-filters-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-shrink: 0;
}

.finance-tx-filters-search-row .finance-tx-clear-filters-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
  color: var(--muted);
}

.finance-tx-filters-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: 0.78rem;
  padding: 0.35rem 0.45rem;
  margin: 0;
}

.finance-tx-filters-toggle-icon {
  flex-shrink: 0;
  display: block;
  opacity: 0.9;
}

.finance-tx-filters-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  background: var(--accent, #3b82f6);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
}

.finance-tx-filters-advanced-panel {
  padding-top: 0.45rem;
  margin-top: 0.15rem;
}

.finance-tx-balances {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 0.6rem;
  margin: 0 0 0.8rem;
}

.finance-tx-balance-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.65rem;
}

.finance-tx-balance-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-tx-balance-label {
  margin-top: 0.28rem;
  font-size: 0.78rem;
}

.finance-tx-balance-value {
  margin-top: 0.18rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.finance-tx-page .ce-table {
  background: #fff;
}

.finance-tx-page .ce-table thead th,
.finance-tx-page .ce-table tbody td {
  background: #fff;
}

.finance-tx-day-group {
  margin-bottom: 0.75rem;
}

.finance-tx-year-separator {
  position: relative;
  margin: 0.95rem 0 0.55rem;
  text-align: center;
}

.finance-tx-year-separator::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  transform: translateY(-50%);
}

.finance-tx-year-separator__label {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.05rem 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg, #fff);
}

.finance-tx-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.45rem 0.15rem 0.35rem;
}

.finance-tx-day-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: lowercase;
  color: var(--text-secondary);
}

.finance-tx-day-total {
  font-size: 0.82rem;
  font-weight: 700;
}

.finance-tx-day-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  /* Scroll OK, scrollbar cachée (Chrome/Safari/Firefox) */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Pas de grab + user-select:none ici : ça empêchait copier montant / libellé. Le drag horizontal reste géré en JS. */
  cursor: default;
}

.finance-tx-day-table-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Cellules : sélection / curseur texte pour copier-coller ; le tr garde cursor:pointer (sous-cellules gagnent). */
.finance-tx-table-wrap .finance-tx-group-table td,
.finance-tx-table-wrap .finance-tx-group-table th {
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
}

/**
 * Liste transactions (un tableau par jour) : chaque *type* de colonne a la même largeur d’un jour à l’autre
 * (reco, heure, source, montant en px). La description seule prend le reste — on n’uniformise pas toutes les colonnes entre elles.
 */
.finance-tx-table-wrap {
  --finance-tx-col-select: 28px;
  --finance-tx-col-reco: 22px;
  --finance-tx-col-time: 54px;
  --finance-tx-col-source: 64px;
  --finance-tx-col-amount: 118px;
  --finance-tx-col-expand: 26px;
}

.finance-tx-table-wrap .finance-tx-group-table {
  table-layout: fixed;
  width: 100%;
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-select {
  width: var(--finance-tx-col-select);
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-reco {
  width: var(--finance-tx-col-reco);
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-time {
  width: var(--finance-tx-col-time);
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-source {
  width: var(--finance-tx-col-source);
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-amount {
  width: var(--finance-tx-col-amount);
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-desc {
  width: auto;
}

.finance-tx-table-wrap .finance-tx-group-table col.finance-col-expand {
  width: var(--finance-tx-col-expand);
}

.finance-tx-table-wrap .finance-tx-group-table td.finance-tx-description {
  max-width: 0;
}

.finance-tx-select-cell {
  text-align: center;
  vertical-align: middle;
  padding-left: 2px;
  padding-right: 2px;
}

.finance-tx-select-cell input[type='checkbox'] {
  cursor: pointer;
}

.finance-tx-select-cell input[type='checkbox']:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.finance-tx-reco-cell {
  text-align: center;
  vertical-align: middle;
  padding-left: 4px;
  padding-right: 4px;
}

.finance-tx-reco-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.finance-tx-reco-dot--full {
  background: #22c55e;
  box-shadow: 0 0 0 1px color-mix(in srgb, #22c55e 35%, transparent);
}

.finance-tx-reco-dot--partial {
  background: #ca8a04;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ca8a04 35%, transparent);
}

.finance-tx-reco-dot--none {
  background: #ef4444;
  box-shadow: 0 0 0 1px color-mix(in srgb, #ef4444 30%, transparent);
}

.finance-tx-loading-bar {
  height: 2px;
  margin-bottom: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: finance-tx-shimmer 1.2s ease-in-out infinite;
}

@keyframes finance-tx-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.finance-tx-entity-chip {
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.2rem;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  vertical-align: middle;
}

.finance-tx-source-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  vertical-align: middle;
}

.finance-tx-source-logo--stripe {
  width: 10px;
  height: 10px;
}

.finance-tx-source-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Pas de display:flex sur le <td> : ça casse border-collapse et aligne mal les bordures entre colonnes. */
.finance-tx-source-cell {
  min-width: 0;
  vertical-align: middle;
}

.finance-tx-source-cell-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.finance-tx-col-amount {
  text-align: right;
  white-space: nowrap;
}

.finance-tx-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.finance-tx-amount--in {
  color: #15803d;
}

.finance-tx-amount--out {
  color: #dc2626;
}

.finance-tx-amount--zero {
  color: var(--text-secondary);
}

.finance-tx-description {
  max-width: 34rem;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.finance-tx-expand-cell {
  text-align: right;
  vertical-align: middle;
  color: var(--muted);
  padding-left: 2px;
  padding-right: 6px;
}

.finance-tx-expand-chevron {
  display: inline-block;
  opacity: 0.75;
  transition: transform 0.16s ease, opacity 0.16s ease;
}

.finance-tx-data-row:hover .finance-tx-expand-chevron {
  opacity: 1;
}

.finance-tx-expand-chevron--open {
  transform: rotate(90deg);
}

.finance-th-filter-btn {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.finance-tx-filters-grid {
  display: grid;
  grid-template-columns:
    minmax(88px, 1fr)
    minmax(88px, 1fr)
    minmax(68px, 0.65fr)
    minmax(68px, 0.65fr)
    minmax(128px, 1.1fr);
  gap: 0.35rem;
  margin-bottom: 0.25rem;
  align-items: start;
}

/* Menu déroulant « puce rapprochement » (inline avec les autres filtres) */
.finance-tx-reco-dd {
  position: relative;
  z-index: 8;
  min-width: 0;
  width: 100%;
}

.finance-tx-reco-dd__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  cursor: pointer;
  list-style: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.finance-tx-reco-dd__summary::-webkit-details-marker {
  display: none;
}

.finance-tx-reco-dd__summary-main {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1;
}

.finance-tx-reco-dd__summary-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.78rem;
  text-align: left;
}

.finance-tx-reco-dd__chevron {
  flex-shrink: 0;
  opacity: 0.65;
  transition: transform 0.15s ease;
}

.finance-tx-reco-dd[open] .finance-tx-reco-dd__chevron {
  transform: rotate(180deg);
}

.finance-tx-reco-dd__list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  z-index: 30;
  max-height: min(280px, 70vh);
  overflow-y: auto;
}

.finance-tx-reco-dd__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.65rem;
  cursor: pointer;
  font-size: 0.78rem;
  line-height: 1.3;
}

.finance-tx-reco-dd__item:hover,
.finance-tx-reco-dd__item:focus-within {
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, transparent);
}

.finance-tx-reco-dd__item.is-active {
  background: color-mix(in srgb, var(--accent, #6366f1) 14%, transparent);
}

.finance-tx-reco-dd__item-label {
  flex: 1;
  min-width: 0;
}

.finance-tx-reco-dot--filter {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.finance-tx-reco-dot--filter.finance-tx-reco-dot--filter-all {
  width: 18px;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #22c55e 0 33%, #ca8a04 33% 66%, #ef4444 66% 100%);
}

.finance-tx-reco-dot--filter.finance-tx-reco-dot--filter-empty {
  background: transparent;
  border: 2px dashed color-mix(in srgb, var(--muted, #64748b) 70%, transparent);
  box-sizing: border-box;
}

.finance-tx-filters-inline .settings-input {
  padding: 0.45rem 0.6rem;
  font-size: 0.82rem;
}

.finance-tx-filters-inline .conv-search {
  margin-bottom: 0;
}

.finance-tx-filters-inline .conv-search-input {
  padding: 0.45rem 2.2rem 0.45rem 0.6rem;
  font-size: 0.82rem;
}

.finance-tx-filter-help {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
}

.finance-tech-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.65rem !important;
  opacity: 0.85;
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
  vertical-align: middle;
  line-height: 1.15;
}

.finance-accounts-table-wrap {
  overflow: visible;
}

.finance-tx-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
}

.finance-tx-ota-scope {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-top: 0.15rem;
}

.finance-tx-filters-scope-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.finance-tx-ota-scope__btn {
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 0.32rem 0.56rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.finance-tx-ota-scope__btn:hover,
.finance-tx-ota-scope__btn:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.finance-tx-ota-scope__btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--accent-contrast, var(--text-primary));
}

.finance-tx-ota-scope__btn--technical {
  margin-left: auto;
  white-space: nowrap;
}

.finance-tx-filters-results-count {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.finance-tx-filtered-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.25rem 0 0.45rem;
}

.finance-tx-filtered-total__label {
  font-size: 0.78rem;
}

.finance-tx-filtered-total__value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.92rem;
  white-space: nowrap;
}

.finance-tx-infinite-sentinel {
  height: 1px;
  overflow-anchor: none;
}

.finance-tx-loading-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.2rem 0.55rem;
  font-size: 0.8rem;
  overflow-anchor: none;
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg, #fff) 88%, transparent);
  border-radius: 8px;
}

.finance-tx-loading-more-spinner {
  flex-shrink: 0;
  opacity: 1;
  color: var(--accent);
  width: 16px;
  height: 16px;
}

.finance-tx-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.finance-tx-toolbar__btn {
  flex-shrink: 0;
}

.finance-tx-toolbar__link {
  font-size: 0.8rem;
  margin-left: auto;
  color: var(--accent, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}

.finance-tx-toolbar__link:hover {
  text-decoration: underline;
}

.finance-tx-toolbar__hint {
  font-size: 0.78rem;
  width: 100%;
  margin: 0;
}

/* Détail transaction : bandeau indigo sur la cellule, panneau blanc */
.finance-tx-inline-detail-row .finance-tx-inline-detail-cell {
  padding: 0;
  vertical-align: top;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.11) 0%, rgba(99, 102, 241, 0.04) 100%);
  border-top: none;
}

#finance-tx-inline-detail-anchor {
  scroll-margin-top: 0.75rem;
}

.finance-tx-inline-panel {
  margin: 0;
  border: 1px solid var(--border);
  border-left: 4px solid #6366f1;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.finance-tx-inline-body {
  padding: 0.65rem;
  border-top: none;
  max-width: 100%;
}

.finance-tx-inline-body--plain {
  padding: 0.65rem 0.75rem 0.75rem;
}

/* Le panneau "expanded" doit rester sélectionnable/cliquable même s'il est dans un conteneur grab-to-scroll. */
.finance-tx-inline-detail-row,
.finance-tx-inline-detail-row * ,
.finance-tx-inline-detail-cell,
.finance-tx-inline-panel,
.finance-tx-inline-body,
.finance-tx-inline-body * {
  cursor: auto;
  user-select: text;
  -webkit-user-select: text;
}

.finance-tx-daily {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Colonne gauche : résumé + titre section ; colonne droite : bouton (ne réserve pas la hauteur du titre) */
.finance-tx-daily-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  row-gap: 0.25rem;
}

.finance-tx-daily-head-main {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.finance-tx-daily-head-main .finance-tx-daily-lead {
  margin-bottom: 0;
}

.finance-tx-daily-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.finance-tx-debug-copy-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  align-self: flex-end;
  margin-top: 0;
  color: var(--muted);
}

.finance-tx-debug-copy-icon {
  flex-shrink: 0;
  display: block;
}

.finance-tx-daily-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  justify-self: end;
  width: max-content;
}

.finance-tx-detail-toggle-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  line-height: 1;
  white-space: nowrap;
}

.finance-tx-detail-toggle-inline__label {
  font-size: 0.7rem;
}

.finance-mini-switch {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 15px;
  flex-shrink: 0;
}

.finance-mini-switch__input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.finance-mini-switch__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border, #cbd5e1) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border, #cbd5e1) 92%, transparent);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.finance-mini-switch__track::before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  left: 1px;
  top: 1px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
  transition: transform 0.16s ease;
}

.finance-mini-switch__input:checked + .finance-mini-switch__track {
  background: color-mix(in srgb, var(--accent, #6366f1) 75%, white 25%);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 88%, white 12%);
}

.finance-mini-switch__input:checked + .finance-mini-switch__track::before {
  transform: translateX(11px);
}

.finance-mini-switch__input:disabled {
  cursor: not-allowed;
}

.finance-mini-switch__input:disabled + .finance-mini-switch__track {
  opacity: 0.55;
}

.finance-tx-th-dot,
.finance-tx-td-dot {
  width: 28px;
  text-align: center;
  vertical-align: middle;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.finance-tx-lucid-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.finance-tx-lucid-dot--matched {
  background: #22c55e;
}

.finance-tx-lucid-dot--partial {
  background: #ca8a04;
}

.finance-tx-lucid-dot--none {
  background: #ef4444;
}

.finance-tx-td-ota {
  width: 34px;
  text-align: center;
  vertical-align: middle;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.finance-ota-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--muted, #64748b);
}

.finance-ota-mark__brand {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.finance-ota-mark--sm .finance-ota-mark__brand {
  width: 14px;
  height: 14px;
}

.finance-ota-mark--sm .finance-ota-mark__svg {
  width: 14px;
  height: 14px;
}

.finance-ota-mark--md .finance-ota-mark__svg {
  width: 18px;
  height: 18px;
}

.finance-tx-desc-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  max-width: 100%;
  vertical-align: middle;
}

.finance-tx-desc-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.finance-tx-daily-lead {
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.45;
}

.finance-tx-status-card {
  margin: 0;
  padding: 0.52rem 0.64rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg, #fff) 96%, #e2e8f0);
}

.finance-tx-status-card--ok {
  background: color-mix(in srgb, var(--success, #15803d) 10%, transparent);
  border-color: color-mix(in srgb, var(--success, #15803d) 28%, transparent);
}

.finance-tx-status-card--warn {
  background: color-mix(in srgb, var(--danger, #b91c1c) 12%, transparent);
  border-color: color-mix(in srgb, var(--danger, #b91c1c) 35%, transparent);
}

.finance-tx-status-card--neutral {
  background: color-mix(in srgb, var(--accent, #6366f1) 7%, transparent);
  border-color: color-mix(in srgb, var(--accent, #6366f1) 24%, transparent);
}

.finance-tx-status-card__title {
  margin: 0;
  font-size: 0.79rem;
  line-height: 1.42;
  font-weight: 600;
}

.finance-tx-status-card__meta {
  margin: 0.28rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.finance-tx-daily-h3 {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 600;
}

.finance-tx-reco-dot--amount-mismatch {
  background: #7c3aed;
  box-shadow: 0 0 0 1px color-mix(in srgb, #7c3aed 40%, transparent);
}

.finance-tx-daily-hint {
  font-size: 0.76rem;
  margin: 0 0 0.4rem;
  line-height: 1.4;
}

.finance-tx-daily-table-wrap {
  overflow-x: auto;
  margin: 0 0 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  /* Même idée : largeurs fixes par type ; le bien (prop) prend le reliquat. */
  --finance-daily-col-dot: 26px;
  --finance-daily-col-ota: 34px;
  --finance-daily-col-kind: 96px;
  /* Réf fournisseur : compacte (évite une colonne "vide" à droite). */
  --finance-daily-col-ref: 86px;
  --finance-daily-col-guest: 116px;
  /* Colonne logement/label réduite pour éviter le grand trou visuel au centre. */
  --finance-daily-col-prop: 170px;
  /* Séjour : colonne prioritaire (peut prendre le reliquat) pour éviter les troncatures. */
  --finance-daily-col-stay: 196px;
  /* Montant : ~70% (réduit) + aligné à droite via td. */
  --finance-daily-col-amount: 84px;
}

.finance-tx-daily-table {
  table-layout: fixed;
  width: 100%;
  font-size: 0.78rem;
  margin: 0;
  min-width: 100%;
}

.finance-tx-daily-table,
.finance-tx-daily-table td,
.finance-tx-daily-table th,
.finance-tx-daily-table a {
  font-family: inherit;
  font-size: 0.78rem;
  line-height: 1.35;
}

.finance-tx-daily-table col.finance-daily-col-dot {
  width: var(--finance-daily-col-dot);
}

.finance-tx-daily-table col.finance-daily-col-ota {
  width: var(--finance-daily-col-ota);
}

.finance-tx-daily-table col.finance-daily-col-kind {
  width: var(--finance-daily-col-kind);
}

.finance-tx-daily-table col.finance-daily-col-ref {
  width: var(--finance-daily-col-ref);
}

.finance-tx-daily-table col.finance-daily-col-prop {
  width: var(--finance-daily-col-prop);
}

.finance-tx-daily-table col.finance-daily-col-guest {
  width: var(--finance-daily-col-guest);
}

.finance-tx-daily-table col.finance-daily-col-stay {
  width: auto;
}

.finance-tx-daily-table col.finance-daily-col-amount {
  width: var(--finance-daily-col-amount);
}

.finance-tx-daily-table td.finance-tx-daily-td-kind,
.finance-tx-daily-table td.finance-tx-daily-td-stay {
  white-space: nowrap;
}

.finance-tx-daily-table td.finance-tx-daily-td-ref {
  font-variant-numeric: tabular-nums;
}

.finance-tx-daily-kind-link {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.finance-tx-daily-kind-link:hover,
.finance-tx-daily-kind-link:focus-visible {
  color: var(--accent);
}

.finance-tx-daily-table td.finance-tx-daily-td-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.finance-tx-daily-empty {
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
}

.finance-tx-imputation-search {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: 0;
}

.finance-tx-imputation-search__title {
  font-size: 0.88rem;
  font-weight: 600;
  margin: 0 0 0.35rem;
}

.finance-tx-imputation-search__hint {
  font-size: 0.78rem;
  margin: 0 0 0.5rem;
}

.finance-tx-imputation-search__field-wrap {
  position: relative;
}

.finance-tx-imputation-search__label {
  display: block;
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.finance-tx-imputation-search__query .conv-search {
  margin-bottom: 0;
}

.finance-tx-imputation-search__query .conv-search-input {
  font-size: 0.82rem;
}

.finance-tx-imputation-search__dropdown {
  margin-top: 0.45rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  background: var(--surface-raised, rgba(0, 0, 0, 0.2));
  max-height: min(420px, 55vh);
  overflow: auto;
}

.finance-tx-imputation-search__dropdown-loading,
.finance-tx-imputation-search__dropdown-err {
  font-size: 0.8rem;
  margin: 0.25rem 0;
}

.finance-tx-imputation-search__empty {
  font-size: 0.8rem;
  margin: 0.35rem 0 0;
}

.finance-tx-imputation-search__table-wrap {
  overflow-x: auto;
}

.finance-tx-imputation-table {
  font-size: 0.78rem;
  width: 100%;
  min-width: 640px;
}

.finance-tx-imputation-th-dot {
  width: 2rem;
}

.finance-tx-imputation-td-dot {
  text-align: center;
  vertical-align: middle;
}

.finance-tx-imputation-td-stay {
  white-space: nowrap;
  color: var(--muted);
  font-size: 0.85rem;
}

.finance-tx-imputation-td-stay--near-window {
  color: #ef4444;
  font-weight: 600;
}

.finance-tx-imputation-td-amt {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.finance-tx-imputation-td-extras {
  max-width: 22rem;
  vertical-align: top;
}

.finance-tx-imputation-extras {
  list-style: none;
  margin: 0;
  padding: 0;
}

.finance-tx-imputation-extra-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
}

.finance-tx-imputation-extra-line:last-child {
  margin-bottom: 0;
}

.finance-tx-imputation-extra-dot {
  flex-shrink: 0;
}

.finance-tx-imputation-extra-label {
  flex: 1;
  min-width: 6rem;
}

a.finance-tx-imputation-extra-label-link {
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a.finance-tx-imputation-extra-label-link:hover,
a.finance-tx-imputation-extra-label-link:focus-visible {
  color: var(--accent);
}

a.finance-tx-imputation-stay-link {
  color: color-mix(in srgb, var(--accent, #6366f1) 88%, var(--text));
  text-decoration: none;
  font-weight: 500;
}

a.finance-tx-imputation-stay-link:hover,
a.finance-tx-imputation-stay-link:focus-visible {
  text-decoration: underline;
}

.finance-tx-imputation-extra-amt {
  font-variant-numeric: tabular-nums;
}

.finance-tx-imputation-extra-btn {
  flex-shrink: 0;
}

.finance-tx-imputation-upsell-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.finance-tx-imputation-no-extra-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
}

.finance-tx-imputation-action-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  min-width: 0;
}

.finance-tx-imputation-partial-hint {
  font-size: 0.72rem;
  line-height: 1.25;
  margin: 0;
  max-width: 9.5rem;
}

.finance-tx-imputation-action-btn {
  min-width: 9.4rem;
  text-align: center;
  cursor: pointer;
}

.finance-tx-imputation-action-btn:disabled {
  cursor: not-allowed;
}

.finance-tx-imputation-td-action {
  white-space: nowrap;
  vertical-align: middle;
}

.finance-tx-imputation-done {
  font-size: 0.75rem;
}

.finance-tx-daily-foot {
  font-size: 0.78rem;
  margin: 0.75rem 0 0;
}

.finance-tx-stripe-meta-card {
  margin-top: 0.55rem;
  padding: 0.62rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--accent, #6366f1) 6%, transparent);
}

.finance-tx-stripe-meta-card__title {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.finance-tx-stripe-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.finance-tx-stripe-meta-block__label {
  margin: 0 0 0.34rem;
  font-size: 0.75rem;
}

.finance-tx-stripe-meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.45rem;
  font-size: 0.76rem;
}

.finance-tx-stripe-meta-list dt {
  font-weight: 600;
  color: var(--muted);
}

.finance-tx-stripe-meta-list dd {
  margin: 0;
  word-break: break-word;
}

.finance-tx-stripe-items {
  margin: 0;
  padding-left: 1.05rem;
  font-size: 0.76rem;
}

.finance-tx-stripe-items__label {
  font-weight: 500;
}

.finance-tx-stripe-meta-raw {
  margin-top: 0.52rem;
}

.finance-tx-debug-reconciliation {
  margin-top: 1rem;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--bg, #fff) 96%, #e2e8f0);
}

.finance-tx-debug-toggle {
  margin: 0.45rem 0.5rem;
  display: inline-flex;
}

.finance-tx-debug-reconciliation__body {
  padding: 0 0.65rem 0.65rem 0.65rem;
  border-top: 1px dashed var(--border);
}

.finance-tx-debug-hint {
  font-size: 0.76rem;
  margin: 0 0 0.5rem;
}

.finance-tx-debug-h4 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}

.finance-tx-rappro-label {
  font-size: 0.75rem;
  font-weight: 600;
  margin: 0.35rem 0 0.2rem;
  color: var(--muted);
}

/* Rapport POST run-engine (composant finance-engine-run-report) */
.finance-engine-run-report-host {
  display: block;
  margin: 0 0 0.85rem;
}

.finance-tx-engine-report {
  max-width: 100%;
}

.finance-engine-report {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface, #fff);
  overflow: hidden;
}

.finance-engine-report__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.finance-engine-report__summary::-webkit-details-marker {
  display: none;
}

.finance-engine-report__summary::before {
  content: '';
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 0.35rem;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}

.finance-engine-report[open] > .finance-engine-report__summary::before {
  transform: rotate(45deg);
  vertical-align: 0.05em;
}

.finance-engine-report__summary-title {
  flex: 1 1 auto;
  min-width: 10rem;
}

.finance-engine-report__summary-stats {
  font-size: 0.78rem;
  font-weight: 500;
  flex: 1 1 100%;
}

@media (min-width: 640px) {
  .finance-engine-report__summary-stats {
    flex: 0 1 auto;
    text-align: right;
  }
}

.finance-engine-report__body {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--border);
}

.finance-engine-report__intro,
.finance-engine-report__run-meta {
  font-size: 0.78rem;
  margin: 0.55rem 0 0.35rem;
  line-height: 1.45;
}

.finance-engine-report__meta-label {
  margin-right: 0.25rem;
}

.finance-engine-report__meta-sep {
  margin: 0 0.35rem;
  opacity: 0.55;
}

.finance-engine-report__mono {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

.finance-engine-report__legend {
  margin: 0.5rem 0 0.65rem;
  padding-left: 1.1rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}

.finance-engine-report__legend strong {
  color: var(--fg, inherit);
}

.finance-engine-report__table-wrap {
  overflow-x: auto;
  margin: 0.35rem 0 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.finance-engine-report__table {
  font-size: 0.76rem;
  margin: 0;
  min-width: 100%;
}

.finance-engine-report__table th,
.finance-engine-report__table td {
  vertical-align: top;
}

.finance-engine-report__detail {
  max-width: 22rem;
  word-break: break-word;
}

.finance-engine-report__trunc {
  font-size: 0.75rem;
  margin: 0 0 0.35rem;
}

.finance-engine-report__debug-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}

.finance-engine-report__debug-pre {
  margin: 0.45rem 0 0;
  padding: 0.5rem;
  max-height: 240px;
  overflow: auto;
  font-size: 0.68rem;
  line-height: 1.4;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, #f8fafc);
}

.finance-tx-data-row {
  cursor: pointer;
}

.finance-tx-data-row td {
  cursor: pointer;
}

.finance-tx-data-row:hover {
  background: var(--bg-secondary, #f4f4f5);
}

.finance-tx-data-row--selected {
  background: var(--bg-secondary, #f4f4f5);
  box-shadow: inset 3px 0 0 var(--accent, #2563eb);
}

.finance-tx-detail-root {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.finance-tx-detail-root > * {
  pointer-events: auto;
}

.finance-tx-detail-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.35);
  cursor: pointer;
}

.finance-tx-detail-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 100vw);
  max-width: 100%;
  background: var(--bg, #fff);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.finance-tx-detail-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.finance-tx-detail-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

.finance-tx-detail-close {
  font-size: 1.35rem;
  line-height: 1;
  padding: 0.15rem 0.45rem;
}

.finance-tx-detail-panel__body {
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.finance-tx-detail-hint {
  font-size: 0.78rem;
  margin: 0 0 0.75rem;
}

.finance-tx-detail-dl {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.82rem;
}

.finance-tx-detail-dl dt {
  margin: 0;
  color: var(--muted);
  font-weight: 600;
}

.finance-tx-detail-dl dd {
  margin: 0;
  word-break: break-word;
}

.finance-tx-detail-mono {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
}

.finance-tx-detail-subtitle {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.finance-tx-detail-pre {
  margin: 0 0 1rem;
  padding: 0.5rem;
  font-size: 0.72rem;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-secondary, #f8fafc);
  overflow-x: auto;
  max-height: 200px;
}

.finance-tx-detail-rappro {
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

.finance-tx-detail-rappro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.75rem 0 0.35rem;
}

.finance-tx-detail-subtitle--inline {
  margin: 0;
}

.finance-tx-detail-loading {
  font-size: 0.8rem;
  margin: 0 0 0.35rem;
}

.finance-tx-detail-error {
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
  color: var(--danger, #b91c1c);
}

.finance-tx-detail-dl--compact {
  gap: 0.25rem 0.5rem;
  margin-bottom: 0.65rem;
  font-size: 0.78rem;
}

.finance-tx-detail-pre--sm {
  max-height: 140px;
  font-size: 0.68rem;
  margin-bottom: 0;
}

.finance-tx-rappro {
  margin-top: 0.25rem;
}

.finance-tx-rappro-meta {
  font-size: 0.78rem;
  margin: 0 0 0.65rem;
}

.finance-tx-rappro-empty {
  font-size: 0.8rem;
  margin: 0 0 0.75rem;
}

.finance-tx-rappro-block {
  margin: 0;
  padding: 0 0 0.85rem;
}

.finance-tx-rappro-block:not(:last-child) {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.85rem;
}

.finance-tx-rappro-h4 {
  margin: 0 0 0.45rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.finance-tx-rappro-table-wrap {
  overflow-x: auto;
  margin: 0;
  -webkit-overflow-scrolling: touch;
}

.finance-tx-rappro-table {
  font-size: 0.75rem;
  min-width: 100%;
}

.finance-tx-rappro-table th,
.finance-tx-rappro-table td {
  vertical-align: top;
}

.finance-tx-rappro-inline-pre {
  margin: 0;
  padding: 0;
  font-family: ui-monospace, monospace;
  font-size: 0.65rem;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 120px;
  overflow: auto;
  background: transparent;
  border: 0;
}

@media (max-width: 768px) {
  /* Une seule ligne : champ de recherche (flex) + actions à droite — pas le bouton Filtres sous la barre. */
  .finance-tx-filters-search-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem;
  }

  .finance-tx-filters-search-row .finance-tx-search-input {
    flex: 1 1 0;
    min-width: 0;
  }

  .finance-tx-filters-row-actions {
    flex: 0 0 auto;
    justify-content: flex-end;
    width: auto;
  }

  /* Libelle long : icône + libellé court sur étroit pour éviter de pousser Filtres à la ligne. */
  .finance-tx-filters-search-row .finance-tx-clear-filters-btn span {
    display: none;
  }

  .finance-tx-filters-search-row .finance-tx-clear-filters-btn {
    padding: 0.35rem 0.45rem;
  }

  .finance-tx-filters-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .finance-tx-filters-inline {
    overflow: visible;
    position: relative;
    z-index: 6;
  }

  .finance-tx-filters-inline .settings-input,
  .finance-tx-filters-inline .finance-tx-search-input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Soldes : même ligne sur mobile (plus une colonne par carte). */
  .finance-tx-balances {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.45rem;
  }

  .finance-tx-balance-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.45rem 0.4rem;
  }

  .finance-tx-balance-label {
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .finance-tx-balance-value {
    font-size: 0.82rem;
  }

  .finance-tx-balance-top {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .finance-tx-toolbar__link {
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
  body.has-app-shell .finance-tx-page .finance-tx-table-wrap.ce-table-wrap {
    overflow-x: visible;
  }

  /* Trois premières colonnes au plus compact : maximiser la zone description sur petit écran. */
  .finance-tx-table-wrap {
    --finance-tx-col-reco: 16px;
    --finance-tx-col-time: 44px;
    --finance-tx-col-source: 50px;
    /* ~80px utiles (colonne + padding cellules réduit ci‑dessous) */
    --finance-tx-col-amount: 80px;
    --finance-tx-col-expand: 20px;
  }

  .finance-tx-page .finance-tx-day-total {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .finance-tx-table-wrap .finance-tx-group-table {
    min-width: 520px;
  }

  .finance-tx-table-wrap .finance-tx-group-table td.finance-tx-description {
    max-width: 0;
    min-width: 0;
  }

  .finance-tx-table-wrap .finance-tx-reco-cell {
    padding-left: 2px;
    padding-right: 2px;
  }

  .finance-tx-table-wrap .finance-tx-group-table td {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
  }

  .finance-tx-table-wrap .finance-tx-entity-chip {
    margin-right: 4px;
    min-width: 1.15rem;
    padding: 0 3px;
    font-size: 0.62rem;
  }
}

.settings-card-body {
  padding: 0 1.25rem 1.25rem 1.25rem;
  margin-top: 1.25rem;
}

.settings-card-body-flush {
  padding: 0 !important;
  margin: 0 !important;
}

.settings-users-table .settings-users-role-select {
  min-width: 11rem;
  max-width: 100%;
}

/* PMS Beds24 — formulaire sync composée (préférences) */
.pms-sync-form {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.pms-sync-section-title {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.pms-sync-section-hint {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
}
.pms-sync-section-hint-tight {
  margin-top: -0.35rem;
  margin-bottom: 0.65rem;
}
.pms-sync-section-actions .pms-sync-actions {
  margin-top: 0;
}
.pms-sync-toggle-grid {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 28rem;
}
.pms-sync-toggle-grid > settings-toggle {
  display: block;
}
.pms-sync-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
}
button.pms-source-dropdown-trigger {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0.15rem 0;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
  border-radius: 8px;
  outline: none;
  box-sizing: border-box;
}
.pms-source-dropdown-trigger-row.pms-sync-toggle-row {
  cursor: pointer;
}
button.pms-source-dropdown-trigger:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring, rgba(59, 130, 246, 0.45));
}
.pms-source-dropdown-value {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 14rem;
  text-align: right;
  justify-content: flex-end;
}
.pms-source-dropdown-chevron {
  flex-shrink: 0;
  opacity: 0.75;
  transition: transform 0.15s ease;
}
.pms-source-dropdown-chevron.open {
  transform: rotate(180deg);
}
.pms-sync-row-muted {
  opacity: 0.5;
}
.pms-sync-source-block {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pms-source-panel-inline {
  position: static;
  z-index: auto;
  padding: 0.35rem 0 0.15rem;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pms-source-panel-inline settings-toggle {
  display: block;
}
.pms-sync-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.pms-sync-btn-full-sync {
  border: 1.5px solid var(--danger);
  color: var(--danger);
  background: transparent;
}
.pms-sync-btn-full-sync:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger-hover);
}
.pms-sync-btn-full-sync:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.pms-sync-stop {
  flex: 1;
  min-width: 12rem;
}

.settings-info-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* Forms */
.settings-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-bottom: 1rem;
}

.settings-form-group:last-child {
  margin-bottom: 0;
}

.settings-form-group label {
  font-size: 0.825rem;
  font-weight: 600;
  color: var(--text);
}

.settings-required-star {
  color: #dc2626;
  margin-left: 0.15rem;
}

.settings-input {
  padding: 0.625rem 0.875rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.9rem;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s ease;
}

.settings-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.settings-input-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: var(--bg-secondary);
}

.settings-input-mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
}

select.settings-input {
  cursor: pointer;
}

.settings-form-row {
  display: flex;
  gap: 1rem;
}

.settings-form-row .settings-form-group {
  flex: 1;
}

.settings-form-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.settings-file-picker-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.settings-file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Pipeline config (catalogue + bindings) */
.settings-pipeline-config .pipeline-config-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.settings-pipeline-config .pipeline-config-tab {
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 0.9rem;
}
.settings-pipeline-config .pipeline-config-tab:hover {
  background: var(--bg-secondary);
}
.settings-pipeline-config .pipeline-config-tab.active {
  background: var(--gradient-primary-subtle);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.settings-pipeline-config .pipeline-config-panel {
  margin-top: 0.5rem;
}
.settings-pipeline-config .pipeline-config-error {
  color: var(--danger);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

/* Catalogue d’events — CRUD (config pipeline) */
.ce-catalogue .ce-hint {
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.ce-catalogue .ce-hint code {
  font-size: 0.8em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-secondary);
}
.ce-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 1.25rem;
  align-items: start;
  margin-bottom: 2rem;
}
@media (max-width: 768px) {
  .ce-layout {
    grid-template-columns: 1fr;
  }
}
.ce-section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--text);
}
.ce-section-sub {
  font-weight: 400;
  font-size: 0.8rem;
}
.ce-sidebar {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  background: var(--surface);
}
.ce-main {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  background: var(--surface);
  min-height: 200px;
}
.ce-add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.ce-add-row-tight {
  margin-bottom: 0;
  margin-top: 0.5rem;
}
.ce-input-sm {
  flex: 1 1 140px;
  min-width: 120px;
}
.ce-domain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ce-domain-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 8px;
  margin-bottom: 0.35rem;
  border: 1px solid transparent;
  position: relative;
}
.ce-domain-item.active {
  border-color: var(--accent);
  background: var(--gradient-primary-subtle);
}
.ce-domain-select {
  flex: 1;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border: none;
  background: transparent;
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.9rem;
}
.ce-domain-select:hover {
  background: var(--bg-secondary);
}
.ce-domain-item.active .ce-domain-select {
  font-weight: 600;
  color: var(--accent);
}
.ce-domain-actions {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}
/* Contrôles domaine : visibles au survol, au focus clavier, ou ligne active (touch / sélection). */
@media (hover: hover) and (pointer: fine) {
  .ce-domain-item:not(:hover):not(:focus-within):not(.active) .ce-domain-actions {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.ce-subtype-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ce-subtype-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  background: var(--bg-secondary);
}
.ce-main-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  margin-bottom: 0.35rem;
}
.ce-main-title {
  margin: 0;
}
.ce-main-domain {
  font-weight: 500;
}
.ce-subtype-count {
  font-size: 0.8rem;
}
.ce-subtype-intro {
  font-size: 0.8rem;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
.ce-add-row-subtype {
  margin-bottom: 0.85rem;
}
.ce-subtype-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
}
.ce-subtype-name {
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--text);
  padding: 0.2rem 0;
  word-break: break-all;
}
.ce-subtype-toolbar-end {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
/* Segmented toggle — plus lisible que deux boutons séparés */
.ce-mode-segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}
.ce-mode-seg {
  border: none;
  margin: 0;
  padding: 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 500;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.ce-mode-seg + .ce-mode-seg {
  border-left: 1px solid var(--border);
}
.ce-mode-seg:hover:not(.is-active) {
  color: var(--text);
  background: var(--bg-secondary);
}
.ce-mode-seg.is-active {
  background: var(--accent);
  color: #fff;
}
.ce-mode-seg:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ce-mode-wild {
  font-weight: 700;
  opacity: 0.95;
}
/* Poubelle : discrète, visible au survol de la carte, rouge au survol du bouton */
.ce-subtype-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.28;
  transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ce-subtype-card:hover .ce-subtype-remove,
.ce-subtype-card:focus-within .ce-subtype-remove {
  opacity: 1;
}
.ce-subtype-remove:hover {
  color: var(--danger);
  background: var(--danger-bg);
}
.ce-subtype-remove:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.ce-details-panel {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--border);
}
.ce-details-lead {
  font-size: 0.75rem;
  margin: 0 0 0.45rem;
}
.ce-code-block {
  font-size: 0.9rem;
  font-family: ui-monospace, monospace;
}
.ce-code-inline {
  font-size: 0.85em;
  font-family: ui-monospace, monospace;
}
.ce-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.ce-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.45rem 0.2rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.8rem;
}
.ce-chip-remove {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  padding: 0 0.15rem;
  line-height: 1;
  font-size: 1.1rem;
}
.ce-chip-remove:hover {
  color: var(--danger);
}
.ce-empty {
  font-size: 0.875rem;
  margin: 0;
}
.ce-fallbacks {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.ce-table-wrap {
  overflow-x: auto;
  margin-bottom: 0.75rem;
  border-radius: 8px;
}
.ce-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.ce-table th,
.ce-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.ce-table th {
  text-align: left;
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--muted);
}
.ce-table-input {
  width: 100%;
  min-width: 72px;
  padding: 0.35rem 0.45rem;
  font-size: 0.8rem;
}
.ce-table-arrow {
  text-align: center;
  color: var(--accent);
  font-weight: 600;
  width: 2rem;
}
.ce-save-row {
  margin-top: 1.25rem;
}
.ce-json-details {
  margin-top: 1rem;
}
.ce-json-details summary {
  cursor: pointer;
  font-size: 0.875rem;
}
.ce-json-pre {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 8px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  overflow-x: auto;
  max-height: 320px;
  overflow-y: auto;
}

/* Textarea */
.settings-textarea {
  width: 100%;
  min-height: 280px;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.825rem;
  line-height: 1.6;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  transition: border-color 0.15s ease;
}

.settings-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.settings-textarea:disabled {
  opacity: 0.6;
  background: var(--bg-secondary);
  cursor: not-allowed;
}

/* settings-btn-* supprimés — remplacés par le système unifié .btn .btn-primary/secondary/ghost/danger/sm + .btn-icon-only */

/* Badges */
.settings-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}

.settings-badge-green {
  background: var(--success-bg);
  color: var(--success);
}

.settings-badge-orange {
  background: var(--warning-bg);
  color: var(--warning);
}

.settings-badge-gray {
  background: var(--bg-secondary);
  color: var(--muted);
}

/* Success message */
.settings-save-feedback {
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.settings-save-feedback.visible {
  opacity: 1;
}

.settings-success-msg {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--success-bg);
  color: var(--success);
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid var(--success-border);
}

/* Empty state */
.settings-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

/* Helper text */
.text-muted {
  color: var(--muted);
  font-size: 0.85rem;
}

/* Avatar image (dans les avatar-circle) */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* Avatar upload section (settings profile) */
.avatar-upload-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.avatar-circle-xl {
  width: 80px;
  height: 80px;
}

.avatar-editable {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.avatar-editable:hover {
  transform: scale(1.05);
}

.avatar-edit-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
  color: white;
}

.avatar-editable:hover .avatar-edit-overlay {
  opacity: 1;
}

.avatar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.avatar-gravatar-hint {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border);
}

.avatar-gravatar-preview {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

/* ===== Crop Modal ===== */
.crop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  backdrop-filter: blur(4px);
}

.crop-modal {
  background: var(--surface);
  border-radius: 16px;
  padding: 1.25rem;
  width: auto;
  max-width: 360px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.crop-modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
  text-align: center;
}

.crop-area {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden;
  cursor: grab;
  margin: 0 auto;
  background: #111;
  border-radius: 12px;
  user-select: none;
  touch-action: none;
}

.crop-area:active {
  cursor: grabbing;
}

.crop-image {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.crop-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 120px at center, transparent 119px, rgba(0, 0, 0, 0.55) 120px);
  pointer-events: none;
  z-index: 2;
}

.crop-circle-border {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.crop-hint {
  text-align: center;
  font-size: 0.8rem;
}

.crop-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* API Keys */
.api-key-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

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

.beds24-token-input .api-key-row {
  padding: 0;
  border-bottom: none;
}

.api-key-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 140px;
}

.api-key-info strong {
  font-size: 0.875rem;
  color: var(--text);
}

.api-key-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 400px;
}

.api-key-input-wrapper .settings-input {
  flex: 1;
  min-width: 0;
}

/* Champ + œil intégré (même principe que .conv-search-wrapper) */
.api-secret-input-field {
  position: relative;
  flex: 1;
  min-width: 0;
}

.api-secret-input-field > .settings-input {
  width: 100%;
  box-sizing: border-box;
  padding-right: 2.5rem;
}

.api-secret-input-field .api-key-eye-btn--embedded {
  position: absolute;
  right: 0.45rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.75rem;
  height: 1.75rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  flex-shrink: 0;
  z-index: 1;
}

.api-secret-input-field .api-key-eye-btn--embedded:hover:not(:disabled) {
  color: var(--accent);
  background: var(--bg-secondary);
}

.api-secret-input-field .api-key-eye-btn--embedded:disabled {
  background: transparent;
}

.api-secret-input-field .api-key-eye-btn--embedded:disabled:hover {
  background: transparent;
}

.api-secret-input-field:focus-within .api-key-eye-btn--embedded:not(:disabled) {
  color: var(--accent);
}

.api-key-masked {
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.api-key-eye-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.api-key-eye-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-secondary);
}

.api-key-eye-btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.api-key-eye-btn:disabled:hover {
  color: var(--text-secondary);
  border-color: var(--border);
  background: var(--surface);
}

.api-key-saved {
  display: flex;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
}

.api-key-saved.visible {
  opacity: 1;
}

/* LLM Models - Table layout */
.settings-badge-blue {
  background: var(--accent-glow);
  color: var(--accent);
}

.llm-table-body {
  padding: 0 !important;
  margin: 0 !important;
}

/* Search bar */
.llm-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.llm-search-bar > svg {
  color: var(--muted);
  flex-shrink: 0;
}

.llm-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--text);
  outline: none;
  font-family: inherit;
}

.llm-search-input::placeholder {
  color: var(--muted);
}

.llm-search-clear {
  background: none;
  border: none;
  padding: 0.2rem;
  cursor: pointer;
  color: var(--muted);
  display: flex;
  border-radius: 4px;
  transition: color 0.15s;
}

.llm-search-clear:hover {
  color: var(--text);
}

/* Table */
.llm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.llm-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.llm-table th {
  text-align: left;
  padding: 0.45rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  white-space: nowrap;
}

.llm-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.llm-table tbody tr {
  transition: background 0.12s;
}

.llm-table tbody tr:hover {
  background: var(--bg-secondary);
}

.llm-table tbody tr:last-child td {
  border-bottom: none;
}

.llm-tr-enabled {
  background: rgba(59, 130, 246, 0.03);
}

/* Column widths */
.llm-th-toggle,
.llm-td-toggle {
  width: 42px;
  text-align: center;
  padding-left: 0.75rem !important;
}

.llm-th-name {
  min-width: 0;
}

.llm-th-provider,
.llm-td-provider {
  width: 100px;
}

.llm-th-icon,
.llm-td-icon {
  width: 30px;
  text-align: center;
}

.llm-th-release,
.llm-td-release {
  width: 75px;
  text-align: center;
  color: var(--text-secondary);
}

.llm-release-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--text-secondary);
  background: var(--bg-tertiary, rgba(255,255,255,0.04));
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.llm-th-cost,
.llm-td-cost {
  width: 70px;
  text-align: right;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  color: var(--text-secondary);
  padding-right: 0.75rem !important;
}

/* Model name cell */
.llm-td-name {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.llm-model-name {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.llm-model-id {
  font-size: 0.68rem;
  color: var(--muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Provider tag */
.llm-provider-tag {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  white-space: nowrap;
}

.llm-provider-gemini { background: rgba(66, 133, 244, 0.1); color: #4285f4; }
.llm-provider-openai { background: rgba(16, 163, 127, 0.1); color: #10a37f; }
.llm-provider-anthropic { background: rgba(204, 150, 96, 0.1); color: #cc9660; }
.llm-provider-groq { background: rgba(244, 78, 59, 0.1); color: #f44e3b; }
.llm-provider-deepseek { background: rgba(75, 109, 245, 0.1); color: #4b6df5; }

/* Icons in table */
.llm-icon-brain,
.llm-icon-eye {
  color: var(--muted);
  opacity: 0.4;
}

.llm-icon-brain.llm-icon-active {
  color: #a855f7;
  opacity: 1;
}

.llm-icon-eye.llm-icon-active {
  color: #22c55e;
  opacity: 1;
}

/* Header icons (in th) */
.llm-th-icon .llm-icon-brain,
.llm-th-icon .llm-icon-eye {
  opacity: 0.6;
}

/* No results / hints */
.llm-no-results,
.llm-search-hint,
.llm-truncated {
  padding: 1.25rem 1rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
}

.llm-refreshing {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.llm-refreshing .spin {
  animation: spin 1s linear infinite;
}

.llm-truncated {
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
}

/* ── LLM Select dropdown component ── */

.llm-select {
  position: relative;
  display: inline-flex;
}

.llm-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.15s ease;
  min-width: 180px;
  text-align: left;
}

.llm-select-toggle:hover {
  border-color: var(--accent);
}

.llm-select-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.llm-select-chevron {
  opacity: 0.5;
  transition: transform 0.15s;
  flex-shrink: 0;
}

.llm-select.open .llm-select-chevron {
  transform: rotate(180deg);
}

.llm-select-menu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow-y: auto;
}

.llm-select-option {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  cursor: pointer;
  text-align: left;
}

.llm-select-star {
  margin-left: 0.25rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

.llm-select-eye,
.llm-select-brain {
  color: var(--muted);
  opacity: 0.6;
  margin-left: 0.25rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
  flex-shrink: 0;
}

.llm-select-release {
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.6;
  margin-left: 0.15rem;
}

.llm-select-table {
  width: 100%;
  border-collapse: collapse;
}

.llm-select-table tr.llm-select-option {
  cursor: pointer;
}

.llm-select-table tr.llm-select-option:hover {
  background: var(--background);
}

.llm-select-table tr.llm-select-option.selected {
  background: var(--border);
}

.llm-select-col-label {
  padding: 0.45rem 0.6rem;
  text-align: left;
  white-space: nowrap;
}

.llm-select-col-price {
  padding: 0.45rem 0.6rem;
  text-align: right;
  font-size: 0.65rem;
  color: var(--muted);
  opacity: 0.7;
  white-space: nowrap;
}

.llm-select-overlay {
  display: none;
}

.llm-select.placeholder .llm-select-toggle {
  color: var(--muted);
  font-style: italic;
}

/* ── Agent default model selection ── */

.agent-llm-defaults {
  display: flex;
  flex-direction: column;
}

.agent-llm-row {
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(130px, 160px) minmax(74px, 96px);
  align-items: center;
  column-gap: 0.8rem;
  row-gap: 0.4rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}

.agent-llm-row:first-child {
  padding-top: 0;
}

.agent-llm-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.agent-llm-label {
  min-width: 90px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.agent-llm-label small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.agent-llm-controls {
  display: contents;
  overflow: visible;
}

.agent-llm-model-select {
  grid-column: 2;
  justify-self: stretch;
  display: block;
  width: 100%;
  min-width: 0;
}

.agent-llm-model-select .llm-select {
  display: flex;
  width: 100%;
  min-width: 0;
}

.agent-llm-model-select .llm-select-toggle {
  min-width: 0;
  width: 100%;
}

.agent-llm-reasoning-wrap {
  grid-column: 3;
  width: 100%;
  justify-self: stretch;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.agent-llm-reasoning-select {
  display: block;
  width: 100%;
  min-width: 0;
}

.agent-llm-reasoning-select .llm-select {
  display: flex;
  width: 100%;
  min-width: 0;
}

.agent-llm-reasoning-select .llm-select-toggle {
  min-width: 0;
  width: 100%;
}

.agent-llm-temp-control {
  grid-column: 4;
  justify-self: stretch;
  display: block;
  width: 100%;
  min-width: 0;
}

.agent-llm-temp-control .temp-control-wrap,
.agent-llm-temp-control .temp-control-trigger {
  width: 100%;
}

/* Chaîne de fallback (tentatives 2, 3, …) */
.agent-llm-fallback-chain-wrap {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  margin-left: 1.25rem;
}

.agent-llm-fallback-chain-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.agent-llm-fallback-chain-label small {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.9;
  margin-top: 2px;
}

.agent-llm-fallback-chain-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Même disposition que la ligne agent : label | modèle | reasoning (icône) | temp */
.agent-llm-fallback-chain-item {
  display: grid;
  grid-template-columns: minmax(90px, 110px) minmax(0, 1fr) minmax(100px, 140px) minmax(74px, 96px);
  align-items: center;
  column-gap: 0.8rem;
  padding: 0.5rem 0.75rem;
  background: color-mix(in srgb, var(--border) 25%, transparent);
  border-radius: 6px;
  border-inline-start: 3px solid var(--muted);
}

.agent-llm-fallback-chain-attempt {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.agent-llm-fallback-chain-model {
  width: 100%;
  min-width: 0;
}

.agent-llm-fallback-chain-model .llm-select,
.agent-llm-fallback-chain-model .llm-select-toggle {
  width: 100%;
  min-width: 0;
}

.agent-llm-fallback-chain-reasoning {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.agent-llm-fallback-chain-reasoning .llm-select,
.agent-llm-fallback-chain-reasoning .llm-select-toggle {
  min-width: 0;
  width: 100%;
}

.agent-llm-fallback-chain-temp {
  width: 100%;
  min-width: 0;
}

.agent-llm-fallback-chain-temp .temp-control-wrap,
.agent-llm-fallback-chain-temp .temp-control-trigger {
  width: 100%;
}

/* Fallback: bloc subordonné à l'agent, pas un agent à part */
.agent-llm-fallback-wrap {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) minmax(130px, 160px) minmax(74px, 96px);
  align-items: center;
  column-gap: 0.8rem;
  margin-top: 0.5rem;
  margin-left: 1.25rem;
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--border) 25%, transparent);
  border-radius: 6px;
  border-inline-start: 3px solid var(--muted);
}

.agent-llm-fallback-label {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
}

.agent-llm-fallback-label small {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.9;
  margin-top: 2px;
}

.agent-llm-fallback-model {
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

.agent-llm-fallback-reasoning {
  grid-column: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.agent-llm-fallback-temp {
  grid-column: 4;
  width: 100%;
  min-width: 0;
}

.agent-llm-fallback-model .llm-select,
.agent-llm-fallback-model .llm-select-toggle,
.agent-llm-fallback-reasoning .llm-select,
.agent-llm-fallback-reasoning .llm-select-toggle {
  min-width: 0;
  width: 100%;
}

.agent-llm-reasoning-icon {
  color: var(--muted);
  opacity: 0.6;
  flex-shrink: 0;
}

.temp-control-wrap {
  position: relative;
}

.temp-control-trigger {
  min-height: 34px;
  min-width: 74px;
  padding: 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.temp-control-trigger:hover {
  border-color: var(--accent);
  background: var(--bg);
}

.temp-control-trigger.is-auto {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
}

.temp-control-popover {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 4px);
  right: 0;
  width: 94px;
  padding: 0.6rem 0.55rem 0.65rem;
}

.temp-control-auto {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

.temp-control-auto input {
  margin: 0;
}

.temp-control-slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.temp-control-slider input[type='range'] {
  width: 98px;
  height: 20px;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  margin: 42px 0 36px;
}

.temp-control-slider span {
  font-size: 0.72rem;
  color: var(--text);
  font-weight: 500;
}

.temp-control-slider.disabled {
  opacity: 0.45;
}

.agent-llm-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--success, #22c55e);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.agent-llm-saved.visible {
  opacity: 1;
}

.agent-llm-error {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: var(--danger, #ef4444);
}

/* Collapsible card header */
.settings-card-header-clickable {
  cursor: pointer;
  user-select: none;
}

.settings-card-header-clickable:hover {
  opacity: 0.8;
}

.collapse-chevron {
  transition: transform 0.2s ease;
  margin-right: 0.25rem;
}

.collapse-chevron.open {
  transform: rotate(90deg);
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex-shrink: 0;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--border);
  border-radius: 22px;
  transition: 0.2s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}

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

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

/* Prompts version nav */
/* ===== Prompts : layout split (liste + éditeur) ===== */

.prompt-split-layout {
  display: flex;
  gap: 0;
  background: var(--surface);
  overflow: hidden;
  min-height: 520px;
}

/* --- Liste des prompts (gauche) --- */

.prompt-list {
  width: 220px;
  min-width: 220px;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
}

.prompt-list-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.5rem 1rem;
  margin: 0;
  background: var(--border);
}

.prompt-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  margin: 1px 0.375rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}

.prompt-list-item:hover {
  background: var(--border);
}

.prompt-list-item.active {
  background: var(--accent);
  color: #fff;
}

.prompt-list-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron (shown on mobile only) */
.prompt-list-item-chevron {
  display: none; /* hidden on desktop */
  color: var(--muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.prompt-list-item.active .prompt-list-item-chevron {
  color: #fff;
  opacity: 0.7;
}

/* Mobile back button (hidden on desktop) */
.prompt-mobile-back {
  display: none;
}

/* --- Éditeur (droite) --- */

.prompt-editor {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  min-width: 0;
  overflow-y: auto;
}

.prompt-editor-empty {
  align-items: center;
  justify-content: center;
}

.prompt-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.prompt-editor-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.prompt-editor-title h3 {
  margin: 0;
  font-size: 1.05rem;
}

.prompt-version-nav {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

.prompt-version-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  min-width: 50px;
  text-align: center;
}

.prompt-save-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--success);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.prompt-save-inline.visible {
  opacity: 1;
}

.prompt-saving-indicator {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.prompt-saving-indicator.visible {
  opacity: 1;
}

.prompt-saving-indicator svg {
  color: var(--accent);
}

.spin {
  animation: spin 0.8s linear infinite;
}

.prompt-description {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  flex-shrink: 0;
}

.prompt-rag-agent-picker {
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.settings-textarea-prompt {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', 'Monaco', monospace;
  font-size: 0.8rem;
  line-height: 1.6;
  tab-size: 2;
  flex: 1 0 auto;
  min-height: 300px;
  resize: none;
}

.prompt-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.5rem;
  flex-shrink: 0;
}

.prompt-footer-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.prompt-token-count {
  font-size: 0.72rem;
  color: var(--muted);
}

.prompt-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.prompt-footer-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.prompt-old-version-notice {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.78rem;
  color: var(--warning);
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  padding: 0.375rem 0.625rem;
  border-radius: 6px;
}

.prompt-reset-btn {
  margin-left: auto;
  gap: 0.375rem;
  font-size: 0.78rem;
  opacity: 0.7;
}
.prompt-reset-btn:hover {
  opacity: 1;
}

/* Add form separator */
.settings-add-form {
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

[data-theme="dark"] .settings-add-form {
  background: rgba(255, 255, 255, 0.02);
}

/* settings-btn-danger supprimé — remplacé par .btn .btn-danger */

/* ===== 2FA inline styles ===== */
.tfa-setup-flow {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tfa-setup-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.tfa-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gradient-primary);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.tfa-setup-step strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.15rem;
}

.tfa-setup-step .text-muted {
  margin: 0;
}

.tfa-qr-wrapper {
  display: flex;
  justify-content: center;
  padding: 0.75rem 0;
}

.tfa-qr-img {
  width: 180px;
  height: 180px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: white;
  padding: 8px;
}

.tfa-secret-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tfa-secret-code {
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  background: var(--bg-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.825rem;
  letter-spacing: 0.04em;
  color: var(--text);
  word-break: break-all;
}

.tfa-code-input {
  max-width: 160px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-align: center;
}

/* 2FA status banners */
.tfa-success-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

[data-theme="dark"] .tfa-success-banner {
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.25);
  color: #34d399;
}

.tfa-enabled-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

[data-theme="dark"] .tfa-enabled-status {
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.25);
  color: #34d399;
}

.tfa-disabled-banner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

[data-theme="dark"] .tfa-disabled-banner {
  background: rgba(252, 211, 77, 0.08);
  border-color: rgba(252, 211, 77, 0.2);
  color: #fbbf24;
}

/* Backup codes grid */
.tfa-backup-section {
  margin-top: 0.5rem;
}

.tfa-backup-section strong {
  display: block;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.tfa-backup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.375rem;
  margin: 0.75rem 0;
}

.tfa-backup-code {
  padding: 0.4rem 0.5rem;
  border-radius: 6px;
  background: var(--bg-secondary);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  text-align: center;
  letter-spacing: 0.05em;
  color: var(--text);
}

/* 2FA action forms (disable/regenerate) */
.tfa-action-form {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.tfa-action-form .text-muted {
  margin: 0 0 0.5rem;
}

.tfa-action-form-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ===== Passkeys inline styles ===== */
.passkeys-inline-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0.25rem;
}

.passkey-inline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.passkey-inline-item:last-child {
  border-bottom: none;
}

.passkey-inline-info {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
}

.passkey-inline-info > svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--muted);
}

.passkey-inline-details {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.passkey-inline-details strong {
  font-size: 0.875rem;
  color: var(--text);
}

.passkey-inline-details .text-muted {
  font-size: 0.78rem;
}

.passkey-inline-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* ── Settings: mobile nav-rail + drawer ── */

/* Backdrop (hidden on desktop) */
.settings-drawer-backdrop {
  display: none;
}

/* Mobile-only: show a simple "Sections" trigger */
.settings-mobile-sections-trigger {
  display: none;
}

/* Label span (visible on desktop by default) */
.settings-nav-label {
  /* no-op on desktop — label is always visible */
}

@media (max-width: 768px) {

  .settings-mobile-sections-trigger {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
  }

  /* --- Rail (collapsed sidebar) --- */
  .settings-sidebar {
    position: fixed;
    left: 0;
    top: var(--nav-height);
    bottom: 0;
    width: 48px;
    padding: 0.75rem 0;
    border-right: 1px solid var(--border);
    border-bottom: none;
    background: var(--bg-secondary);
    z-index: 50;
    overflow: hidden;
    transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease;
  }

  body.has-app-shell .settings-sidebar {
    top: var(--app-mobile-chrome-h, 0px);
  }

  .settings-sidebar.expanded {
    width: 220px;
    z-index: 201;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
    clip-path: inset(0 -30px 0 0);
  }

  /** Scroll global workspace : pas de mini-scroll dans le drawer, la liste suit la page. */
  body.has-app-shell.shell-workspace-scroll .settings-sidebar.expanded {
    overflow-y: visible;
  }

  [data-theme="dark"] .settings-sidebar.expanded {
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }

  /* --- Nav items in rail mode --- */
  .settings-nav {
    flex-direction: column;
    gap: 0.125rem;
    position: static;
  }

  .settings-nav-title {
    display: none;
  }

  .settings-nav-item {
    justify-content: center;
    padding: 0.7rem 0;
    gap: 0;
    border-radius: 0;
    width: 48px;
    min-height: 44px;
    position: relative;
  }

  .settings-nav-item svg,
  .settings-nav-item > svg {
    flex-shrink: 0;
  }

  .settings-nav-item.active {
    background: var(--gradient-primary-subtle);
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* Hide labels in rail mode */
  .settings-nav-label {
    display: none;
  }

  /* --- Expanded drawer: show labels --- */
  .settings-sidebar.expanded .settings-nav-item {
    justify-content: flex-start;
    gap: 0.625rem;
    padding: 0.6rem 0.75rem;
    width: auto;
    border-radius: 8px;
    margin: 0 0.5rem;
  }

  .settings-sidebar.expanded .settings-nav-item.active {
    box-shadow: none;
  }

  .settings-sidebar.expanded .settings-nav-label {
    display: inline;
    white-space: nowrap;
  }

  /* --- Content area --- */
  .settings-content {
    margin-left: 48px;
    padding: 1rem 0.5rem 0;
  }

  /* --- Backdrop (below navbar only) --- */
  .settings-drawer-backdrop {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  body.has-app-shell .settings-drawer-backdrop {
    top: var(--app-mobile-chrome-h, calc(44px + env(safe-area-inset-top, 0px)));
  }

  .settings-drawer-backdrop.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Form overrides (unchanged) --- */
  .settings-form-row {
    flex-direction: column;
  }

  .api-key-row {
    flex-direction: column;
  }

  .api-key-input-wrapper {
    max-width: 100%;
  }

  .tfa-action-form-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tfa-code-input {
    max-width: 100%;
  }

  .passkey-inline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .passkey-inline-actions {
    margin-left: 2.125rem;
  }

  /* ── Auth: stack form action buttons vertically ── */
  .settings-form-actions {
    flex-wrap: wrap;
  }

  .settings-form-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    justify-content: center;
  }

  /* Wrap long button text to avoid overflow */
  .tfa-enabled-status {
    flex-wrap: wrap;
    font-size: 0.85rem;
  }

  .tfa-enabled-status span {
    flex: 1;
    min-width: 0;
  }

  /* Google scopes: smaller pills on mobile */
  .google-scope-pill {
    font-size: 0.62rem;
    padding: 0.1rem 0.4rem;
    word-break: break-all;
  }

  .google-status-row {
    gap: 0.6rem;
  }

  .google-status-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .google-status-icon svg {
    width: 20px;
    height: 20px;
  }

  .google-status-text strong {
    font-size: 0.85rem;
    word-break: break-all;
  }

  /* ── Agent LLM: stack on mobile ── */
  .agent-llm-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }

  .agent-llm-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
  }

  .agent-llm-controls .llm-select {
    flex: 1;
    min-width: 0;
  }

  .agent-llm-controls .llm-select-toggle {
    min-width: 0;
    width: 100%;
  }

  .agent-llm-reasoning-wrap {
    width: 100%;
  }

  .agent-llm-reasoning-select {
    flex: 1;
    min-width: 0;
  }

  .agent-llm-temp-control {
    grid-column: auto;
  }

  .agent-llm-fallback-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    grid-column: unset;
    margin-left: 0.75rem;
    padding: 0.5rem 0.6rem;
  }

  .agent-llm-fallback-label {
    width: 100%;
    order: -1;
  }

  .agent-llm-fallback-model {
    flex: 1;
    min-width: 0;
  }

  /* ── llm-select: bottom-sheet on mobile ── */
  .llm-select-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
  }

  .llm-select-menu {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 1000 !important;
    max-height: 60vh;
  }

  .llm-select-col-label {
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
  }

  .llm-select-col-price {
    padding: 0.6rem 0.75rem;
    font-size: 0.75rem;
  }

  /* ── Prompts: master/detail pattern on mobile ── */

  .prompt-split-layout {
    flex-direction: column;
    min-height: auto;
  }

  /* --- List: full width, visible by default --- */
  .prompt-list {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .prompt-list-item {
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
    min-height: 44px;
    font-size: 0.88rem;
  }

  .prompt-list-item:last-child {
    border-bottom: none;
  }

  .prompt-list-item-label {
    white-space: normal;
  }

  /* Show chevron on mobile */
  .prompt-list-item-chevron {
    display: block;
  }

  /* --- Editor: full width, hidden by default --- */
  .prompt-editor {
    display: none;
    padding: 1rem;
  }

  .prompt-editor-empty {
    display: none;
  }

  /* When editor is active on mobile */
  .prompt-split-layout.mobile-show-editor .prompt-list {
    display: none;
  }

  .prompt-split-layout.mobile-show-editor .prompt-editor {
    display: flex;
  }

  /* --- Mobile back button --- */
  .prompt-mobile-back {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    background: none;
    border: none;
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.25rem 0;
    margin-bottom: 0.75rem;
  }

  .prompt-mobile-back:active {
    opacity: 0.7;
  }

  /* --- Editor header: stack title and version nav --- */
  .prompt-editor-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .prompt-editor-title h3 {
    font-size: 1.1rem;
  }

  .prompt-version-nav {
    align-self: flex-start;
  }

  /* --- Textarea: taller on mobile --- */
  .settings-textarea-prompt {
    min-height: 280px;
    font-size: 0.78rem;
  }

  /* --- Footer: stack vertically --- */
  .prompt-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .prompt-footer-right {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .prompt-old-version-notice {
    font-size: 0.72rem;
  }

  /* ── LLM table → card layout on mobile ──
     HTML order: toggle(1) name(2) provider(3) brain(4) eye(5) release(6) cost-in(7) cost-out(8)
     Mobile grid:
       Row 1: [toggle] [name+id  ] [brain] [eye]
       Row 2: [toggle] [release  ] [cost-in     ]
     Hidden: provider(3), cost-out(8)
  */
  .llm-table-body {
    overflow-x: visible;
  }

  .llm-table thead {
    display: none;
  }

  .llm-table,
  .llm-table tbody {
    display: block;
    width: 100%;
  }

  .llm-table tbody tr {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 0;
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    align-items: center;
  }

  .llm-table tbody tr:last-child {
    border-bottom: none;
  }

  .llm-table td {
    border: none;
    padding: 0;
  }

  /* 1: Toggle → col 1, spans both rows */
  .llm-table tbody tr td:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    padding-right: 0.5rem !important;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
    width: auto;
  }

  /* 2: Name → col 2, row 1 */
  .llm-table tbody tr td:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .llm-model-name {
    font-size: 0.88rem;
  }

  .llm-model-id {
    font-size: 0.66rem;
  }

  /* 3: Provider → hidden */
  .llm-table tbody tr td:nth-child(3) {
    display: none;
  }

  /* 4: Brain icon → col 3, row 1 */
  .llm-table tbody tr td:nth-child(4) {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    text-align: center;
    padding: 0 0.15rem;
  }

  /* 5: Eye icon → col 4, row 1 */
  .llm-table tbody tr td:nth-child(5) {
    grid-column: 4;
    grid-row: 1;
    width: auto;
    text-align: center;
    padding: 0 0.15rem;
  }

  /* 6: Release → col 2, row 2 */
  .llm-table tbody tr td:nth-child(6) {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    text-align: left;
    font-size: 0.72rem;
    color: var(--muted);
    padding-top: 0.15rem;
  }

  /* 7: Input cost → col 3-4, row 2 */
  .llm-table tbody tr td:nth-child(7) {
    grid-column: 3 / 5;
    grid-row: 2;
    width: auto;
    text-align: right;
    font-size: 0.7rem;
    padding-top: 0.15rem;
    padding-right: 0 !important;
  }

  /* 8: Output cost → hidden on mobile */
  .llm-table tbody tr td:nth-child(8) {
    display: none;
  }

  .llm-release-tag {
    font-size: 0.65rem;
    padding: 1px 4px;
  }
}

/* ============================================
   Google Drive settings
   ============================================ */

.settings-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  animation: settings-alert-in 0.3s ease;
}

@keyframes settings-alert-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

.settings-alert-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.settings-alert-error {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.settings-badge-success {
  background: var(--success-bg);
  color: var(--success);
}

.settings-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.settings-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

.google-status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.google-status-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-status-icon--connected {
  background: var(--success-bg);
}

.google-status-icon--disconnected {
  background: var(--bg-secondary);
}

.google-status-icon--unconfigured {
  background: var(--warning-bg);
  color: var(--warning);
}

.google-status-text {
  flex: 1;
}

.google-status-text strong {
  display: block;
  font-size: 0.95rem;
  color: var(--text);
}

.google-status-text p {
  margin: 0.25rem 0 0;
  font-size: 0.825rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.google-status-text code {
  background: var(--bg-secondary);
  padding: 0.1rem 0.3rem;
  border-radius: 3px;
  font-size: 0.8rem;
}

.google-scopes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem !important;
}

.google-scope-pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.7rem;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.google-permissions {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.google-permissions h4 {
  font-size: 0.825rem;
  color: var(--text);
  margin: 0 0 0.5rem;
  font-weight: 600;
}

.google-permissions ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.google-permissions li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.google-permissions li svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--success);
}

/* =============================================
   Agent Activity Indicator (navbar)
   ============================================= */

.agent-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  position: relative;
  cursor: default;
}

.agent-indicator.active .agent-indicator-icon {
  animation: spin 1.5s linear infinite;
  color: var(--accent, #6366f1);
}

.agent-popin {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--surface);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 220px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  z-index: 100;
  font-size: 0.82rem;
}

.agent-popin.visible {
  display: block;
}

.agent-popin-row {
  padding: 2px 0;
}

.agent-popin-row strong {
  font-weight: 600;
}

/* Global agent running banner (fixed bottom bar) */
.agent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: var(--text-secondary);
  cursor: pointer;
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}

.agent-banner-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.agent-banner-spinner {
  animation: spin 1.2s linear infinite;
  color: var(--accent);
  flex-shrink: 0;
}

.agent-banner-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 400px;
}

.agent-banner-elapsed {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

[data-theme="dark"] .agent-banner {
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
}

/* =============================================
   Toast Notifications
   ============================================= */
.toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: 420px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.08);
  font-size: 0.85rem;
  color: var(--text);
  pointer-events: auto;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.toast-visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-leaving {
  opacity: 0;
  transform: translateX(20px);
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.toast-message {
  line-height: 1.4;
  word-break: break-word;
}

.toast-link {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent, #667eea);
  text-decoration: none;
  align-self: flex-start;
}

.toast-link:hover {
  text-decoration: underline;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  opacity: 0.6;
  transition: opacity 0.15s;
}

.toast-close:hover {
  opacity: 1;
}

/* Type variants */
.toast-error {
  border-left: 3px solid var(--danger, #ef4444);
}

.toast-error .toast-icon {
  color: var(--danger, #ef4444);
}

.toast-success {
  border-left: 3px solid var(--success, #22c55e);
}

.toast-success .toast-icon {
  color: var(--success, #22c55e);
}

.toast-warning {
  border-left: 3px solid var(--warning, #f59e0b);
}

.toast-warning .toast-icon {
  color: var(--warning, #f59e0b);
}

.toast-info {
  border-left: 3px solid var(--accent, #667eea);
}

.toast-info .toast-icon {
  color: var(--accent, #667eea);
}

[data-theme="dark"] .toast {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
}

@media (max-width: 640px) {
  .toast-container {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    max-width: none;
  }
}

.text-success { color: var(--success); }
.text-danger { color: var(--danger); }

.settings-status-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.settings-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.settings-status-connected { background: var(--success); }
.settings-status-disconnected { background: var(--danger); }
.settings-feedback { font-size: 0.875rem; }

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.settings-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.settings-toggle-hint {
  font-size: 0.8rem;
  line-height: 1.4;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border);
  border-radius: 24px;
  transition: background 0.2s;
}
.toggle-switch .toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}
.toggle-switch input:disabled + .toggle-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Auto-respond mode dropdown (settings) */
.settings-mode-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.auto-respond-mode-dropdown-wrapper {
  position: relative;
  flex-shrink: 0;
}
.auto-respond-mode-trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.15s;
  min-width: 110px;
  justify-content: center;
}
.auto-respond-mode-trigger:hover { background: var(--bg); }
.auto-respond-mode-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
.auto-respond-mode-trigger-off { color: var(--danger); border-color: var(--danger); }
.auto-respond-mode-trigger-propose { color: var(--warning); border-color: var(--warning); }
.auto-respond-mode-trigger-trivial { color: var(--accent); border-color: var(--accent); }
.auto-respond-mode-trigger-auto { color: var(--success); border-color: var(--success); }
.auto-respond-mode-trigger .arm-icon { flex-shrink: 0; }
.auto-respond-mode-chevron {
  margin-left: 0.1rem;
  opacity: 0.7;
}

.auto-respond-mode-dropdown,
.temp-control-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.auto-respond-mode-dropdown {
  min-width: 280px;
  z-index: 100;
  display: none;
}
.auto-respond-mode-dropdown.visible { display: block; }

.auto-respond-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}
.auto-respond-mode-option:first-child { border-radius: 9px 9px 0 0; }
.auto-respond-mode-option:last-child { border-radius: 0 0 9px 9px; }
.auto-respond-mode-option:hover { background: var(--bg); }
.auto-respond-mode-option.active { background: var(--bg); }
.auto-respond-mode-option .arm-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.auto-respond-mode-option .arm-option-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.auto-respond-mode-option .arm-option-label {
  font-weight: 600;
  font-size: 0.8rem;
}
.auto-respond-mode-option.active .arm-option-label { font-weight: 700; }
.auto-respond-mode-option .arm-option-desc {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.35;
}
.arm-icon-off { color: var(--danger); }
.arm-icon-propose { color: var(--warning); }
.arm-icon-trivial { color: var(--success); }
.arm-icon-auto { color: var(--accent); }

/* =============================================
   CONVERSATIONS PAGE
   ============================================= */

.conv-layout {
  display: flex;
  height: calc(100vh - 2 * var(--main-padding));
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
}

/* Shell : la zone utile est déjà limitée par le panneau bas — pas de 100vh (sinon le contenu passe sous l’observability). */
body.has-app-shell .conv-layout {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
}

/* --- Sidebar (conversation list) --- */

.conv-sidebar {
  width: 360px;
  min-width: 300px;
  min-height: 0;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.conv-sidebar-header {
  padding: 1rem;
}

.conv-sidebar-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  color: var(--text);
}

.conv-top-toolbar {
  margin-top: 0.45rem;
}
.list-panel .conv-search {
  margin-bottom: 0;
}
.conv-top-menus {
  display: flex;
  gap: 0.35rem;
  flex-wrap: nowrap;
}

.conv-top-menu {
  position: relative;
}

.conv-top-menu-panel {
  min-width: 240px;
  padding: 0;
}

.conv-top-menu-actions-panel {
  right: 0;
  left: auto;
  min-width: 190px;
}

.conv-top-menu-section {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
}

.conv-top-menu-section:last-child {
  border-bottom: none;
}

.conv-top-menu-label {
  padding: 0 0.65rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.conv-top-menu-options {
  display: flex;
  flex-direction: column;
}

.conv-active-chips {
  margin-top: 0.45rem;
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.conv-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  border-radius: 999px;
  padding: 0.2rem 0.52rem;
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  max-width: 100%;
}

.conv-filter-chip-close {
  font-size: 0.8rem;
  line-height: 1;
}

.conv-filter-chip-count,
.conv-option-count {
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.28rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font-size: 0.66rem;
  line-height: 1;
}

.conv-option-count {
  margin-left: auto;
}

.conv-filter-chip-clear-all {
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
}

.conv-filter-chip-clear-all:hover {
  border-color: var(--text);
  color: var(--text);
}

/* Custom dropdowns */
.conv-filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 0.75rem;
  height: calc(1.15rem + 2 * 0.35rem + 2px);
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.conv-filter-trigger:hover {
  background: var(--bg);
  color: var(--text);
}
.conv-filter-trigger.active {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}
.conv-filter-trigger-icon {
  display: inline-flex;
  align-items: center;
}
.conv-filter-chevron {
  opacity: 0.5;
  margin-left: 0.1rem;
}
.conv-filter-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 50;
  overflow: hidden;
  padding: 0.25rem 0;
}
[data-theme="dark"] .conv-filter-menu {
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.conv-filter-menu.visible { display: block; }

@media (max-width: 768px) {
  .conv-top-menu .conv-filter-menu.visible {
    z-index: 450;
  }

  /**
   * Menus liste : hors du flux (fixed) pour éviter tout clipping par ancêtres (overflow, empilement).
   * La position verticale est posée par conversations.js via --conv-*-menu-top au clic.
   */
  .conv-top-menu-filters .conv-filter-menu.visible {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    top: var(--conv-filters-menu-top, 120px);
    width: auto;
    min-width: 0;
    max-height: min(72vh, calc(100vh - var(--conv-filters-menu-top, 96px) - 12px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 600;
  }

  .conv-top-menu-actions .conv-filter-menu.visible {
    position: fixed;
    left: 0.65rem;
    right: 0.65rem;
    top: var(--conv-actions-menu-top, 120px);
    width: auto;
    min-width: 0;
    max-height: min(72vh, calc(100vh - var(--conv-actions-menu-top, 96px) - 12px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 600;
  }
}
.conv-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}
.conv-filter-option:hover { background: var(--bg); }
.conv-filter-option.active {
  font-weight: 600;
  color: var(--accent);
}
.conv-filter-option-icon {
  display: inline-flex;
  align-items: center;
}
.conv-filter-option svg,
.conv-filter-trigger svg {
  flex-shrink: 0;
}

.conv-list {
  flex: 1;
  overflow-y: auto;
}

/* Conversation sections */
.conv-section-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 2;
}
.conv-section-header-active {
  background: var(--warning-bg);
  color: var(--warning);
}
.conv-section-header-unread {
  background: var(--accent-glow);
  color: var(--accent);
}
.conv-section-header-active .conv-section-icon {
  flex-shrink: 0;
}
.conv-section-header-current {
  background: var(--success-bg);
  color: var(--success);
}
.conv-section-header-future {
  background: var(--accent-glow);
  color: var(--accent);
}
.conv-section-header-past {
  background: var(--bg);
  color: var(--muted);
}
.conv-section-header-training {
  background: rgba(168, 85, 247, 0.08);
  color: rgb(168, 85, 247);
}
[data-theme="dark"] .conv-section-header-training {
  background: rgba(168, 85, 247, 0.12);
  color: rgb(192, 132, 252);
}
.conv-section-header-training.training-flag-todo {
  background: var(--bg);
  color: var(--muted);
}
.conv-section-header-training.training-flag-en-cours {
  background: var(--warning-bg);
  color: var(--warning);
}
.conv-section-header-training.training-flag-attente {
  background: var(--accent-glow);
  color: var(--accent);
}
.conv-section-header-training.training-flag-ok {
  background: var(--success-bg);
  color: var(--success);
}
.conv-section-count {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 10px;
  margin-left: auto;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
}
[data-theme="dark"] .conv-section-count {
  background: rgba(255, 255, 255, 0.08);
}

/* Collapsible sections */
.conv-section-toggle {
  cursor: pointer;
  user-select: none;
}
.conv-section-toggle:hover {
  background: var(--border);
}
.conv-section-chevron {
  transition: transform 0.2s;
  flex-shrink: 0;
  opacity: 0.5;
  margin-left: 0.25rem;
}
.conv-section-toggle:hover .conv-section-chevron {
  opacity: 0.8;
}
.conv-section-chevron.open {
  transform: rotate(90deg);
}
.conv-section-label {
  min-width: 0;
  flex: 1;
}

/* Search bar */
.conv-search {
  margin-bottom: 0.6rem;
}
.conv-search-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.training-new-empty-btn {
  width: 100%;
}
.conv-search-wrapper {
  position: relative;
  flex: 1;
}
.conv-search-icon {
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
  transition: color 0.15s;
}
.conv-search-wrapper:focus-within .conv-search-icon {
  color: var(--accent);
}
.conv-search-action {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.conv-search-action:hover {
  color: var(--text);
  background: var(--bg-secondary);
}
.conv-search-action .conv-search-icon {
  position: static;
  transform: none;
  pointer-events: none;
}
.conv-search-input {
  width: 100%;
  padding: 0.5rem 2.2rem 0.5rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.82rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.conv-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.conv-search-input::placeholder {
  color: var(--muted);
}

/* Search highlight */
.conv-item-preview mark,
.conv-item-name mark,
.chat-msg-content mark {
  background: rgba(250, 204, 21, 0.4);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
[data-theme="dark"] .conv-item-preview mark,
[data-theme="dark"] .conv-item-name mark,
[data-theme="dark"] .chat-msg-content mark {
  background: rgba(250, 204, 21, 0.25);
}

.conv-item {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
  border-left: 3px solid transparent;
}

.conv-item:hover {
  background: var(--bg);
}

.conv-item-active {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Effective autonomy mode left rail (status, not background) */
.conv-item-mode-auto,
.conv-item-mode-trivial { border-left-color: var(--accent); }
.conv-item-mode-propose { border-left-color: var(--warning); }
.conv-item-mode-off     { border-left-color: var(--danger); }

.conv-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.conv-item-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.conv-item-platform-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.chat-header-platform-icon {
  display: inline-flex;
  align-items: center;
}

.platform-thread-link {
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.platform-thread-link:hover {
  opacity: 0.85;
}

.conv-item-time {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.conv-item-time-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.conv-item-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  display: inline-block;
}

.conv-item-flag {
  font-size: 0.72rem;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.conv-item-flag-icon {
  display: block;
}

.conv-item-flag-important {
  color: var(--danger, #dc2626);
}

.conv-item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.conv-item-sentiment {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1;
}

.conv-item-preview {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.conv-item-preview-unread {
  font-weight: 700;
  color: var(--text);
}

.conv-item-badges {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-shrink: 0;
}

.conv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

.conv-badge svg { display: block; }

.conv-badge-airbnb { background: none; padding: 0; }
.conv-badge-booking { background: none; padding: 0; }
.conv-badge-direct_email { background: var(--bg); color: var(--muted); font-size: 0.6rem; }

.conv-badge-autonomy-trivial { background: rgba(102, 126, 234, 0.1); color: var(--accent); }
.conv-badge-autonomy-propose { background: var(--warning-bg); color: var(--warning); }
.conv-badge-autonomy-off { background: var(--danger-bg); color: var(--danger); }
.conv-badge-escalation { background: var(--danger-bg); color: var(--danger); font-weight: 600; }
.conv-item-escalation { font-size: 0.7rem; flex-shrink: 0; }

.conv-empty, .conv-loading {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.conv-top-menu-hint {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.conv-bulk-checkbox {
  display: inline-flex;
  align-items: center;
  margin-right: 0.4rem;
}

.conv-bulk-checkbox input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.conv-confirm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 20, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
  padding: 1rem;
}

.conv-confirm-modal {
  width: min(480px, 100%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  padding: 1rem;
}

.conv-confirm-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.45rem;
}

.conv-confirm-message {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}

.conv-confirm-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

/* --- Chat panel --- */

.conv-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}

.conv-chat-empty {
  align-items: center;
  justify-content: center;
}

.conv-chat-placeholder {
  text-align: center;
  color: var(--muted);
}

.conv-chat-placeholder h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary, var(--muted));
}

.conv-mobile-back.conv-mobile-back {
  display: none;
}

/* Chat header */

.chat-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0.75rem 1rem;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

.chat-header-upper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  min-width: 0;
  width: 100%;
}

.chat-header-upper > .conv-mobile-back {
  align-self: flex-start;
}

/** Ligne titre + zone « priorité » (ex. badge TRAINING) — même logique que l’en-tête avis. */
.chat-header-head-body {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  min-width: 0;
  width: 100%;
}

.chat-header-aside {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-width: 0;
}

.chat-header-aside .chat-header-training-badge {
  margin-right: 0;
}

.chat-header-actions-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.chat-header-actions-row .chat-header-actions {
  width: 100%;
}

.chat-header-info {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

@media (min-width: 769px) {
  .chat-header-info {
    /* Évite que la barre d’actions (icônes + liste déroulante) réduise la zone titre à 0 px. */
    min-width: min(11rem, 42%);
  }
}

.chat-header-info > div {
  min-width: 0;
  overflow: hidden;
}

.chat-header-info h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.chat-header-name-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}
.chat-header-name-row h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-header-state-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.2rem;
  min-height: 1.3rem;
  flex-wrap: wrap;
}

.chat-header-state-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.chat-header-state-chip-unread {
  color: var(--accent);
  background: var(--accent-glow);
  border-color: rgba(var(--accent-rgb, 99, 102, 241), 0.28);
}
.chat-header-state-chip-followup {
  color: var(--warning-hover, #b45309);
  background: var(--warning-bg, #fff7ed);
  border-color: rgba(245, 158, 11, 0.35);
}
.chat-header-state-chip-important {
  color: var(--danger, #dc2626);
  background: var(--danger-bg, #fef2f2);
  border-color: rgba(220, 38, 38, 0.28);
}
.chat-header-state-chip-translation {
  color: var(--text-secondary, var(--muted));
  background: var(--bg-secondary);
  border-color: var(--border);
}

.chat-header-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.chat-header-icon-toggle {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.chat-header-icon-toggle:hover {
  background: var(--bg-secondary);
  color: var(--text);
}
.chat-header-icon-toggle.active {
  color: var(--accent);
  background: var(--accent-glow);
}
.chat-header-icon-important.active {
  color: var(--danger, #dc2626);
  background: var(--danger-bg, #fef2f2);
}

.btn-translate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.btn-translate:hover {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}
.btn-translate.active {
  color: var(--accent);
}
.btn-translate.active:hover {
  background: var(--accent-glow);
  color: var(--accent-hover);
}
.translate-spinner {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.chat-header-booking {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.1rem 0.55rem;
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.chat-header-date-item {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.chat-header-date-item svg {
  flex-shrink: 0;
  opacity: 0.6;
}
.chat-header-date-rel {
  font-size: 0.65rem;
  opacity: 0.7;
}
.chat-header-sep {
  color: var(--border);
}
.chat-header-property {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
  color: var(--text-secondary, var(--muted));
}
.chat-header-property svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.chat-header-training-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.45rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid rgba(168, 85, 247, 0.45);
  color: rgb(168, 85, 247);
  margin-right: 0.4rem;
}
[data-theme="dark"] .chat-header-training-badge {
  background: var(--surface);
  border-color: rgba(192, 132, 252, 0.5);
  color: rgb(192, 132, 252);
}

.chat-input-role-hint {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: italic;
}

.btn-danger-ghost {
  color: var(--muted);
}
.btn-danger-ghost:hover {
  color: var(--danger, #ef4444);
}

.chat-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
}
.chat-header-actions .btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

.chat-header-actions-overflow {
  position: relative;
}

.chat-header-more-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.chat-header-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 220px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  z-index: 60;
  display: none;
  padding: 0.3rem;
}
.chat-header-more-menu.visible {
  display: block;
}

.chat-header-more-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  border-radius: 7px;
  text-align: left;
  font-size: 0.79rem;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}
.chat-header-more-item:hover {
  background: var(--bg);
}
.chat-header-more-item.active {
  color: var(--accent);
  background: var(--accent-glow);
}

.chat-header-more-item-icon {
  flex-shrink: 0;
  opacity: 0.85;
}
/* Aligner le texte avec les lignes qui ont une icône 14px + gap */
.chat-header-more-item--no-leading-icon {
  padding-left: calc(0.55rem + 14px + 0.45rem);
}
.chat-header-more-item-danger {
  color: #dc2626;
}
.chat-header-more-item-danger .chat-header-more-item-icon {
  color: #dc2626;
  opacity: 1;
}
.chat-header-more-item-danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}
[data-theme="dark"] .chat-header-more-item-danger {
  color: #f87171;
}
[data-theme="dark"] .chat-header-more-item-danger:hover {
  background: rgba(248, 113, 113, 0.12);
  color: #fca5a5;
}

.chat-msg-select {
  position: absolute;
  left: -1.5rem;
  top: 0.68rem;
  display: inline-flex;
  align-items: center;
  z-index: 3;
}

.chat-msg-select input {
  width: 15px;
  height: 15px;
}

.chat-msg-select-offset {
  margin-left: 1.35rem;
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-icon:hover {
  background: var(--bg);
  color: var(--text);
}

/* Autonomy dropdown */

.autonomy-dropdown-wrapper {
  position: relative;
}

.autonomy-trigger {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  transition: all 0.15s;
}
.autonomy-trigger:hover { background: var(--bg); }
.autonomy-trigger-auto { color: var(--success); border-color: var(--success); }
.autonomy-trigger-trivial { color: var(--accent); border-color: var(--accent); }
.autonomy-trigger-propose { color: var(--warning); border-color: var(--warning); }
.autonomy-trigger-off { color: var(--danger); border-color: var(--danger); }

.autonomy-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 140px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 50;
  display: none;
  overflow: hidden;
}
.autonomy-dropdown.visible { display: block; }

.autonomy-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
  white-space: nowrap;
}
.autonomy-dropdown-item:hover { background: var(--bg); }
.autonomy-dropdown-item.active { font-weight: 600; }

.autonomy-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.autonomy-dot-auto { background: var(--success); }
.autonomy-dot-trivial { background: var(--accent); }
.autonomy-dot-propose { background: var(--warning); }
.autonomy-dot-off { background: var(--danger); }
.autonomy-dot.training-flag-todo { background: var(--muted); }
.autonomy-dot.training-flag-en-cours { background: var(--warning); }
.autonomy-dot.training-flag-attente { background: var(--accent); }
.autonomy-dot.training-flag-ok { background: var(--success); }
.autonomy-dropdown-item.training-flag-todo { color: var(--muted); }
.autonomy-dropdown-item.training-flag-en-cours { color: var(--warning); }
.autonomy-dropdown-item.training-flag-attente { color: var(--accent); }
.autonomy-dropdown-item.training-flag-ok { color: var(--success); }
.autonomy-trigger.training-flag-todo {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 35%, var(--border));
  background: color-mix(in srgb, var(--bg) 85%, var(--muted) 15%);
}
.autonomy-trigger.training-flag-en-cours {
  color: var(--warning);
  border-color: color-mix(in srgb, var(--warning) 35%, var(--border));
  background: var(--warning-bg);
}
.autonomy-trigger.training-flag-attente {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--accent-glow);
}
.autonomy-trigger.training-flag-ok {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 35%, var(--border));
  background: var(--success-bg);
}

/* Autonomy disabled (master switch OFF) */
.autonomy-trigger.autonomy-disabled {
  text-decoration: line-through;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}
.autonomy-trigger.autonomy-disabled .autonomy-dot {
  background: var(--muted) !important;
}
.conv-badge.autonomy-badge-disabled {
  text-decoration: line-through;
  background: var(--bg) !important;
  color: var(--muted) !important;
}

/* Messages area */

chat-message {
  display: contents;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--surface);
}

.chat-msg {
  max-width: 100%;
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  position: relative;
  width: auto;
}

.chat-msg-selectable {
  cursor: pointer;
}
.chat-msg-block {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}
.chat-msg-block-guest {
  align-self: stretch;
}
.chat-msg-block-ai,
.chat-msg-block-admin,
.chat-msg-block-admin_note,
.chat-msg-block-system_event {
  align-self: stretch;
}

/* Zone hover unique : bulle + date + bouton … (évite les trous entre blocs) */
.chat-msg-hover-target {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 80%;
  vertical-align: top;
}
.chat-msg-block-guest .chat-msg-hover-target {
  align-self: flex-start;
}
.chat-msg-block-ai .chat-msg-hover-target,
.chat-msg-block-admin .chat-msg-hover-target,
.chat-msg-block-admin_note .chat-msg-hover-target {
  align-self: flex-end;
}
.chat-msg-block-system_event .chat-msg-hover-target {
  align-self: center;
}

/* Largeur = contenu (bulle). Pas de stretch horizontal : sinon la bulle remplit 80 % et le footer aussi. */
.chat-msg-bubble-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: max-content;
  max-width: 100%;
}
.chat-msg-anchor-ai .chat-msg-bubble-col,
.chat-msg-anchor-admin .chat-msg-bubble-col,
.chat-msg-anchor-admin_note .chat-msg-bubble-col {
  align-items: flex-end;
}
.chat-msg-anchor-system_event .chat-msg-bubble-col {
  align-items: center;
}

/* Colonne : ligne bulle + …, puis date en dessous (le … n’est plus aligné sur le footer) */
.chat-msg-anchor {
  position: static;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  max-width: 100%;
}
.chat-msg-anchor-guest,
.chat-msg-anchor-user {
  align-items: flex-start;
}
.chat-msg-anchor-ai,
.chat-msg-anchor-admin,
.chat-msg-anchor-admin_note {
  align-items: flex-end;
}
.chat-msg-anchor-system_event {
  align-items: center;
}
.chat-msg-anchor-row {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: 100%;
}
.chat-msg-anchor-ai .chat-msg-anchor-row,
.chat-msg-anchor-admin .chat-msg-anchor-row,
.chat-msg-anchor-admin_note .chat-msg-anchor-row {
  flex-direction: row-reverse;
}
.chat-msg-anchor-guest .chat-msg-anchor-row,
.chat-msg-anchor-user .chat-msg-anchor-row {
  flex-direction: row;
}
.chat-msg-anchor-system_event .chat-msg-anchor-row {
  flex-direction: row;
  justify-content: center;
}

.chat-msg-guest {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
}

.chat-msg-ai {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg-is-ai {
  background: rgba(102, 126, 234, 0.1) !important;
  color: var(--text);
}
[data-theme="dark"] .chat-msg-is-ai {
  background: rgba(124, 156, 224, 0.15) !important;
}
.chat-msg-ai-icon {
  position: absolute;
  top: 0.3rem;
  left: 0.35rem;
  line-height: 1;
  display: flex;
  color: #2563eb;
  background: #dbeafe;
  border: 1px solid rgba(37, 99, 235, 0.22);
  border-radius: 999px;
  padding: 3px;
  z-index: 2;
}
.chat-msg-is-ai .chat-msg-content {
  padding-left: 1.35rem;
}

.chat-msg-admin {
  align-self: flex-end;
  background: var(--bg);
  color: var(--text);
  border-bottom-right-radius: 4px;
}
[data-theme="dark"] .chat-msg-admin {
  background: var(--bg-secondary);
}

.chat-msg-system_event {
  align-self: center;
  max-width: 90%;
  background: var(--warning-bg, #fff8e1);
  color: var(--warning, #f59e0b);
  font-size: 0.75rem;
  padding: 0.4rem 0.75rem;
  border-radius: 20px;
  text-align: center;
}

.chat-msg-admin_note {
  align-self: flex-end;
  max-width: 85%;
  background: transparent;
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  font-style: italic;
}


.chat-msg-user-conversation-icon {
  position: absolute;
  top: 0.3rem;
  left: 0.35rem;
  line-height: 1;
  display: flex;
  color: #15803d;
  background: #dcfce7;
  border: 1px solid rgba(21, 128, 61, 0.2);
  border-radius: 999px;
  padding: 3px;
  z-index: 2;
}

.chat-msg-admin .chat-msg-content {
  padding-left: 0.3rem;
}

/* Prompt change validation card */
.training-prompt-change {
  align-self: flex-end;
  max-width: 85%;
  margin: 0.25rem 0 0.75rem auto;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1.5px solid #8b5cf6;
  border-radius: var(--radius, 0.5rem);
  font-size: 0.82rem;
}
.training-prompt-change-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
  color: #7c3aed;
}
.training-prompt-change-header strong {
  font-weight: 600;
}
.training-prompt-change-target {
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.training-prompt-change-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-left: 0.4rem;
}
.training-prompt-change-badge.badge-new {
  background: #dcfce7;
  color: #166534;
}
.training-prompt-change-badge.badge-edit {
  background: #fef3c7;
  color: #92400e;
}

.training-prompt-diff {
  max-height: 300px;
  overflow-y: auto;
  padding: 0.4rem 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 0.25rem);
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.training-prompt-diff .diff-same {
  padding: 0 0.5rem;
  color: var(--muted);
}
.training-prompt-diff .diff-add {
  padding: 0 0.5rem;
  background: #dcfce7;
  color: #166534;
}
.training-prompt-diff .diff-remove {
  padding: 0 0.5rem;
  background: #fee2e2;
  color: #991b1b;
  text-decoration: line-through;
}
.training-prompt-diff .diff-prefix {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  user-select: none;
  opacity: 0.6;
}
[data-theme="dark"] .training-prompt-change-badge.badge-new {
  background: #052e16;
  color: #86efac;
}
[data-theme="dark"] .training-prompt-change-badge.badge-edit {
  background: #451a03;
  color: #fcd34d;
}
[data-theme="dark"] .training-prompt-diff .diff-add {
  background: rgba(34, 197, 94, 0.15);
  color: #86efac;
}
[data-theme="dark"] .training-prompt-diff .diff-remove {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}
.training-prompt-change-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.training-prompt-parse-error {
  align-self: flex-end;
  max-width: 85%;
  margin: 0.25rem 0 0.75rem auto;
  padding: 0.75rem 1rem;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius, 0.5rem);
  color: var(--warning-hover);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.training-prompt-parse-error strong {
  font-size: 0.8rem;
}
.training-prompt-parse-error small {
  color: var(--muted);
}

/* Training mode segmented control */
.training-mode-segmented {
  display: inline-flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}
.training-mode-seg-btn {
  font-size: 0.68rem;
  padding: 0.2rem 0.55rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
  font-weight: 500;
  line-height: 1.4;
}
.training-mode-seg-btn:not(:last-child) {
  border-right: 1px solid var(--border);
}
.training-mode-seg-btn:hover:not(.seg-active) {
  background: rgba(128, 128, 128, 0.08);
}
.training-mode-seg-btn.seg-active.seg-guest {
  background: rgba(102, 126, 234, 0.14);
  color: var(--accent);
}
.training-mode-seg-btn.seg-active.seg-remark {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.training-mode-seg-btn.seg-active.seg-meta {
  background: rgba(139, 92, 246, 0.14);
  color: #7c3aed;
}
[data-theme="dark"] .training-mode-seg-btn.seg-active.seg-remark {
  color: #fbbf24;
}
[data-theme="dark"] .training-mode-seg-btn.seg-active.seg-meta {
  color: #a78bfa;
}

/* Input box in training remark mode */
.chat-input-box-training {
  border-color: #f59e0b !important;
}
.chat-input-box-training .chat-input-textarea {
  background: rgba(245, 158, 11, 0.04);
}

/* Training send button */
.btn-training {
  background: #f59e0b;
  color: white;
  border: none;
}
.btn-training:hover {
  background: #d97706;
}
.btn-training:disabled {
  background: #fcd34d;
  color: rgba(255,255,255,0.7);
}

/* Meta-training (recadrage du Manager) */
.chat-input-box-meta {
  border-color: #8b5cf6 !important;
}
.chat-input-box-meta .chat-input-textarea {
  background: rgba(139, 92, 246, 0.04);
}
.btn-meta-training {
  background: #8b5cf6;
  color: white;
  border: none;
}
.btn-meta-training:hover {
  background: #7c3aed;
}
.btn-meta-training:disabled {
  background: #c4b5fd;
  color: rgba(255,255,255,0.7);
}

/* Chat input left area */
.chat-input-left {
  display: flex;
  align-items: center;
}

/* Footer : juste sous la bulle (dans .chat-msg-bubble-col) */
.chat-msg-footer {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.2rem;
  padding: 0 0.15rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.chat-msg-footer-guest {
  align-self: flex-start;
  justify-content: flex-start;
}
.chat-msg-footer-user {
  align-self: flex-end;
  justify-content: flex-end;
}
.chat-msg-footer-ai,
.chat-msg-footer-admin,
.chat-msg-footer-admin_note {
  align-self: flex-end;
  justify-content: flex-end;
}
.chat-msg-footer-system_event { align-self: center; }

.chat-msg-hover-time {
  color: var(--text-secondary);
  white-space: nowrap;
}

/* Traduction sous la bulle (dans la colonne) */
.chat-msg-bubble-col .chat-msg-translating {
  margin-top: 0.12rem;
  max-width: 100%;
}
.chat-msg-translating {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--accent);
  font-size: 0.62rem;
  margin-top: -0.4rem;
  padding: 0 0.25rem;
  max-width: 80%;
  opacity: 0.85;
  animation: chat-translate-fade-in 0.3s ease;
}
.chat-msg-translating-guest { align-self: flex-start; }
.chat-msg-translating-ai,
.chat-msg-translating-admin { align-self: flex-end; }
.chat-msg-translating-icon {
  opacity: 0.7;
  flex-shrink: 0;
}
.chat-msg-translating-spin {
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.chat-msg-translating-label {
  white-space: nowrap;
}
@keyframes chat-translate-fade-in {
  from { opacity: 0; }
  to { opacity: 0.85; }
}

/* Debug button on AI messages */
.chat-msg-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  line-height: 0;
  top: 0;
  bottom: auto;
  right: auto;
  left: auto;
  z-index: 30;
}
.chat-msg-side-actions-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, opacity 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.chat-msg-side-actions-btn svg {
  display: block;
}
/* Survol sur toute la ligne message (pleine largeur du bloc), pas seulement la bulle */
.chat-msg-block:hover .chat-msg-side-actions-btn,
.chat-msg-block:has(.action-menu-panel.visible) .chat-msg-side-actions-btn,
.chat-msg-block:has(.chat-msg-more-wrap:hover) .chat-msg-side-actions-btn {
  opacity: 1;
}
.chat-msg-side-actions-btn:hover {
  color: var(--text);
  border-color: var(--accent);
  background: var(--bg);
}
.chat-msg-more-menu {
  display: block;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 0.25rem;
  z-index: 6000;
  overflow-y: auto;
}
.action-menu-panel.chat-msg-more-menu {
  position: fixed;
}
.chat-msg-more-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  border: none;
  background: none;
  color: var(--text);
  font-size: 0.74rem;
  text-align: left;
  padding: 0.42rem 0.5rem;
  border-radius: 6px;
  cursor: pointer;
}
.chat-msg-more-item-icon {
  flex-shrink: 0;
}
.chat-msg-more-item-icon-slot {
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chat-msg-more-item-icon--train {
  stroke: #7c3aed;
}
.chat-msg-more-item-icon--delete {
  stroke: #dc2626;
}
[data-theme="dark"] .chat-msg-more-item-icon--train {
  stroke: #a78bfa;
}
[data-theme="dark"] .chat-msg-more-item-icon--delete {
  stroke: #f87171;
}
.chat-msg-more-item:hover { background: var(--bg); }
/* Date : visible au survol de toute la ligne (évite les zones mortes à gauche/droite) */
.chat-msg-block:hover .chat-msg-footer,
.chat-msg-block:has(.action-menu-panel.visible) .chat-msg-footer,
.chat-msg-block:has(.chat-msg-more-wrap:hover) .chat-msg-footer {
  opacity: 1;
}

.chat-draft-more {
  margin-left: 0;
}
.chat-draft-more .chat-msg-side-actions-btn {
  opacity: 1;
  pointer-events: auto;
}

.action-menu {
  position: relative;
  display: inline-flex;
}

.chat-share-panel {
  margin: 0.7rem 0.75rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: 12px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-glow) 70%, var(--surface-2)),
    var(--surface)
  );
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.chat-share-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-2) 65%, var(--accent-glow));
}

.chat-share-toolbar-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.chat-share-title {
  font-size: 0.8rem;
  color: var(--text);
  font-weight: 600;
}

.chat-share-counter {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.chat-share-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-share-close-btn {
  padding-inline: 0.45rem;
}

.chat-share-result,
.chat-share-error {
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
}

.chat-share-result {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-glow));
  border-bottom: 1px solid var(--border);
}

.chat-share-result a {
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-share-error {
  color: var(--danger, #ef4444);
}

.chat-share-copy-icon-btn {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-share-companion {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem 0.7rem;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-glow));
}

.chat-share-companion-spinner {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.chat-share-companion-spinner-icon {
  animation: spin 0.95s linear infinite;
}

.chat-share-companion-textarea {
  flex: 1;
  min-height: 64px;
  resize: vertical;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.45;
  padding: 0.5rem 0.6rem;
}

/* Self-Eval badge on AI messages */
.eval-badge {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  font-size: 0.5rem;
  line-height: 1;
  cursor: default;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.eval-badge:hover {
  opacity: 1;
}
.eval-badge-high { color: #22c55e; }
.eval-badge-medium { color: #f59e0b; }
.eval-badge-low { color: #ef4444; }
[data-theme="dark"] .eval-badge-high { color: #4ade80; }
[data-theme="dark"] .eval-badge-medium { color: #fbbf24; }
[data-theme="dark"] .eval-badge-low { color: #f87171; }

/* Train button on messages */
.chat-train-btn {
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.chat-train-btn:hover {
  color: var(--accent);
}
.chat-train-gemini {
  flex-shrink: 0;
  opacity: 0.7;
}
.chat-train-btn:hover .chat-train-gemini {
  opacity: 1;
}

/* Truncate button on messages (training only) */
.chat-truncate-btn {
  font-size: 0.65rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: none;
  border: none;
  padding: 0.1rem 0.3rem;
  cursor: pointer;
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.chat-truncate-btn:hover {
  color: var(--danger, #ef4444);
}

.chat-msg-content {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg-attachments {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chat-msg-attachment-link {
  display: inline-flex;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.chat-msg-attachment-image {
  display: block;
  width: 130px;
  max-width: 40vw;
  height: auto;
  object-fit: cover;
}
.chat-msg-image-only {
  padding: 0;
  overflow: visible;
  width: clamp(220px, 38vw, 320px);
  max-width: 70%;
  border-radius: 12px;
}
.chat-msg-image-only .chat-msg-content {
  display: none;
}
.chat-msg-image-only .chat-msg-attachments {
  margin-top: 0;
  display: block;
  width: 100%;
}
.chat-msg-image-only .chat-msg-attachment-link {
  display: block;
  width: 100%;
  line-height: 0;
  border: none;
  border-radius: 12px;
  overflow: hidden;
}
.chat-msg-image-only .chat-msg-attachment-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  background: var(--surface-2);
  border-radius: 12px;
}

/* Hard guard: keep rounded corners even if other sections override chat rules. */
.chat-msg.chat-msg-image-only,
.chat-msg.chat-msg-image-only .chat-msg-attachment-link,
.chat-msg.chat-msg-image-only .chat-msg-attachment-image {
  border-radius: 12px !important;
}
.chat-msg-attachment-fallback {
  margin-top: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chat-msg-attachment-fallback-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  text-decoration: none;
  background: var(--surface-2);
}
.chat-msg-attachment-fallback-link:hover {
  color: var(--text-primary);
  border-color: var(--accent);
}
.chat-msg-reply-to {
  border-left: 2px solid var(--accent);
  padding: 3px 8px;
  margin-bottom: 5px;
  border-radius: 0 4px 4px 0;
  background: rgba(var(--accent-rgb, 99, 102, 241), 0.08);
}
.chat-msg-reply-to-text {
  font-size: 0.78rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.chat-msg-guest .chat-msg-reply-to {
  border-left-color: var(--muted);
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .chat-msg-guest .chat-msg-reply-to {
  background: rgba(255, 255, 255, 0.05);
}

.chat-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Sentiment emoji in chat header */
.chat-header-sentiment {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.chat-header-escalation {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}
.chat-header-escalation-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--danger);
  background: var(--danger-bg);
  padding: 0.15rem 0.5rem;
  border-radius: 0.75rem;
  white-space: nowrap;
}
.chat-header-escalation-resolve {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.5rem;
  white-space: nowrap;
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 30%, transparent);
}
.chat-header-escalation-resolve:hover {
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

/* Day change marker */
.chat-day-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  margin: 0.25rem 0;
  width: 100%;
}
.chat-day-marker::before,
.chat-day-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--border) 75%, transparent);
  max-width: 90px;
}
.chat-day-marker-label {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Sentiment change marker (inline system divider) */
.chat-sentiment-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  margin: 0.2rem 0;
  width: 100%;
}
.chat-sentiment-marker::before,
.chat-sentiment-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  max-width: 80px;
}
.chat-sentiment-marker-emoji {
  font-size: 0.85rem;
  line-height: 1;
}
.chat-sentiment-marker-label {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Mode change marker (mirrors sentiment marker layout) */
.chat-mode-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.3rem 0;
  margin: 0.2rem 0;
  width: 100%;
}
.chat-mode-marker::before,
.chat-mode-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
  max-width: 80px;
}
.chat-mode-marker-icon {
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.7;
}
.chat-mode-marker-label {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}

/* Escalation marker */
.chat-escalation-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  margin: 0.3rem auto;
  width: fit-content;
  max-width: min(100%, 42rem);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
  border-radius: 1rem;
}
.chat-escalation-marker-icon {
  font-size: 0.8rem;
  line-height: 1;
}
.chat-escalation-marker-label {
  font-size: 0.7rem;
  color: var(--danger);
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 500;
}

/* Tool debug marker */
.chat-tool-debug {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.7rem;
  margin: 0.15rem auto;
  width: fit-content;
  max-width: 90%;
  background: color-mix(in srgb, var(--primary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius: 0.8rem;
  font-family: var(--font-mono, 'SF Mono', 'Fira Code', 'Cascadia Code', monospace);
  font-size: 0.65rem;
  line-height: 1.3;
  color: var(--muted);
  opacity: 1;
  transition: opacity 220ms ease, border-color 220ms ease, background-color 220ms ease;
}
.chat-tool-debug-faded {
  opacity: 0.42;
}
.chat-tool-debug-faded:hover {
  opacity: 1;
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}
.chat-tool-debug-icon {
  font-size: 0.75rem;
  opacity: 0.7;
}
.chat-tool-debug-name {
  color: var(--primary);
  font-weight: 600;
}
.chat-tool-debug-args {
  color: var(--muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-tool-debug-sep {
  opacity: 0.5;
}
.chat-tool-debug-result {
  color: color-mix(in srgb, var(--success) 80%, var(--text));
}
.chat-tool-debug-duration {
  opacity: 0.6;
}
.chat-tool-debug-pending {
  animation: tool-debug-pulse 1.2s ease-in-out infinite;
}
@keyframes tool-debug-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

.chat-routing-skip-notice {
  align-self: center;
  margin: 0.35rem 0;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Typing indicator */
.chat-typing {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 0.32rem;
  padding: 0.15rem 0;
  margin: 0.2rem auto;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.chat-typing-spinner {
  flex-shrink: 0;
  color: var(--muted);
  animation: spin 1.05s linear infinite;
  opacity: 0.72;
}

.chat-typing-label {
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* Draft (pending response) */

.chat-draft {
  padding: 0.75rem;
  border: 2px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  animation: draft-pulse 2s ease-in-out infinite;
}

@keyframes draft-pulse {
  0%, 100% { border-color: var(--accent); }
  50% { border-color: var(--accent-end, var(--accent)); }
}

.chat-draft-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.chat-draft-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--accent);
}

/* Draft self-eval badge */
.draft-eval-badge {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
}
.draft-eval-high {
  color: #15803d;
  background: rgba(34, 197, 94, 0.12);
}
.draft-eval-medium {
  color: #a16207;
  background: rgba(245, 158, 11, 0.12);
}
.draft-eval-low {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
}
[data-theme="dark"] .draft-eval-high {
  color: #4ade80;
  background: rgba(34, 197, 94, 0.15);
}
[data-theme="dark"] .draft-eval-medium {
  color: #fbbf24;
  background: rgba(245, 158, 11, 0.15);
}
[data-theme="dark"] .draft-eval-low {
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
}

.chat-draft-countdown {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 20px;
  background: var(--accent);
  color: white;
}

.chat-draft-content {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 0.5rem;
}

.chat-draft-guard-banner {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-hover);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.chat-input-guard-banner {
  padding: 0.4rem 0.55rem;
  border-radius: 8px;
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  color: var(--warning-hover);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.35;
}

.chat-draft-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}
.chat-draft-actions-spacer {
  flex: 1 1 auto;
}

.chat-draft-footer {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  width: 100%;
}

.chat-draft-footer .chat-msg-hover-time {
  margin-left: auto;
}

.chat-draft-footer .chat-debug-btn,
.chat-draft-footer .chat-copy-btn {
  opacity: 1;
}
.chat-draft-footer .chat-copy-btn.active {
  color: var(--accent);
}

.chat-draft-textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 0.5rem;
}

.chat-draft-edit-actions {
  display: flex;
  gap: 0.5rem;
}

/* Input area */

.chat-input-area {
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}

/* Au-dessus du panneau bas observability (z-index shell) */
body.has-app-shell .chat-input-area {
  position: relative;
  z-index: 45;
}

.chat-input-box {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.chat-input-compose-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-input-compose-row .chat-input-textarea {
  flex: 1 1 auto;
}

.chat-input-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  resize: none;
  line-height: 1.4;
  max-height: 240px;
  box-sizing: border-box;
  overflow-y: hidden;
}

.chat-input-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-shadow, rgba(99, 102, 241, 0.2));
}

.chat-input-textarea::placeholder {
  color: var(--muted);
}

.chat-input-textarea-ai-prefilled {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.14), rgba(37, 99, 235, 0.08));
  border-color: rgba(59, 130, 246, 0.55);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.18);
}

.chat-input-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat-input-footer-actions-only {
  justify-content: flex-end;
}

.chat-note-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  user-select: none;
}
.chat-note-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chat-note-toggle-label {
  font-size: 0.75rem;
  color: var(--muted);
}
.chat-note-toggle-switch {
  gap: 0.5rem;
}
.chat-note-switch-slider {
  width: 34px;
  height: 18px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background 0.15s;
}
.chat-note-switch-slider::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.15s;
}
.chat-note-toggle input:checked + .chat-note-switch-slider {
  background: var(--accent);
}
.chat-note-toggle input:checked + .chat-note-switch-slider::before {
  transform: translateX(16px);
}
.chat-note-toggle input:checked ~ .chat-note-toggle-label {
  color: var(--accent);
  font-weight: 600;
}

.chat-send-btn {
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 8px;
  height: auto;
  min-width: auto;
}

.chat-trigger-inline {
  padding: 0.5rem 0;
  display: flex;
  justify-content: center;
}
.chat-trigger-inline-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: transparent;
}

.chat-trigger-inline-btn:hover:not(:disabled) {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background: transparent;
  box-shadow: 0 2px 10px var(--accent-shadow);
}
.chat-trigger-inline-icon {
  flex-shrink: 0;
}

.chat-analysis-payload-feedback {
  margin: 0 0.75rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.8rem;
  border-radius: 6px;
  background: var(--surface-elevated, rgba(0, 0, 0, 0.04));
}

.chat-escalation-banner {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--danger);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem;
}

.chat-pipeline-warning {
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--warning, #b8860b);
  border-radius: 8px;
  background: rgba(184, 134, 11, 0.12);
  color: var(--warning, #b8860b);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.chat-pipeline-warning-icon { flex-shrink: 0; }
.chat-pipeline-warning-text { flex: 1; }
.chat-pipeline-warning-debug-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: 4px;
  color: var(--warning, #b8860b);
}
.chat-pipeline-warning-debug-btn:hover {
  background: rgba(184, 134, 11, 0.2);
}

.chat-pipeline-warnings-banner {
  margin: 0 0 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--warning, #b8860b);
  border-radius: 8px;
  background: rgba(184, 134, 11, 0.12);
  color: var(--warning, #b8860b);
  font-size: 0.78rem;
}

.chat-pipeline-warnings-title {
  font-weight: 600;
}

.chat-pipeline-warnings-list {
  margin: 0.35rem 0 0.4rem 1rem;
  padding: 0;
}

.chat-pipeline-warnings-list li {
  margin: 0.15rem 0;
  display: flex;
  gap: 0.45rem;
  align-items: flex-start;
}

.chat-pipeline-warning-severity {
  flex-shrink: 0;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.02rem 0.32rem;
  font-size: 0.64rem;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Pipeline error as conversation message (yellow bubble + debug icon à droite) */
.chat-msg-pipeline-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--warning, #b8860b);
  border-radius: 10px;
  background: rgba(184, 134, 11, 0.12);
  color: var(--warning, #b8860b);
  font-size: 0.8rem;
  max-width: 85%;
  align-self: flex-end;
}
.chat-pipeline-error-icon { flex-shrink: 0; }
.chat-msg-pipeline-error .chat-pipeline-error-content {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}
.chat-pipeline-error-debug-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--warning, #b8860b);
  border-radius: 4px;
}
.chat-pipeline-error-debug-btn:hover {
  color: var(--accent);
  background: rgba(184, 134, 11, 0.15);
}

.conv-sync-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.desktop-only {
  display: inline-flex;
}

/* Responsive */

@media (max-width: 768px) {
  .desktop-only { display: none !important; }
  .conv-layout {
    flex-direction: row;
    border: none;
    border-radius: 0;
    height: calc(100vh - 2 * var(--main-padding));
    margin: calc(-1 * var(--main-padding));
  }

  body.has-app-shell .conv-layout {
    height: auto;
    flex: 1;
    min-height: 0;
    /* Évite le cadre gris « double » : la marge négative reculait sous le padding du viewport. */
    margin: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    box-shadow: none;
  }

  body.has-app-shell .list-panel .conv-list.list-panel-scroll {
    overflow-x: visible;
  }

  body.has-app-shell .conv-sidebar,
  body.has-app-shell .conv-mobile-chat .conv-chat {
    border: none;
    box-shadow: none;
  }

  body.has-app-shell .list-panel .conv-sidebar-header {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
  .conv-sidebar {
    width: 100%;
    min-width: 0;
    max-height: none;
    border-right: none;
    flex-shrink: 0;
  }
  .conv-sidebar-header {
    padding: 0.5rem 0.75rem;
  }
  .conv-top-menus {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .conv-top-menus::-webkit-scrollbar {
    display: none;
  }
  .conv-active-chips {
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }
  .conv-active-chips::-webkit-scrollbar {
    display: none;
  }
  .conv-chat {
    display: none;
  }
  .conv-chat-empty {
    display: none !important;
  }
  .conv-mobile-chat .conv-sidebar {
    display: none;
  }
  .conv-mobile-chat .conv-chat {
    display: flex;
    width: 100%;
  }
  .conv-mobile-back {
    display: flex !important;
    flex-shrink: 0;
    box-sizing: border-box;
    outline: 1px solid var(--border);
    outline-offset: 2px;
    border-radius: 8px;
    margin-right: 0.4rem;
  }

  .conv-mobile-back:focus {
    outline: none;
  }

  .conv-mobile-back:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /** Liste / détail : en-têtes collants en haut du scrollport (chrome menu est hors flux au-dessus). */
  body.has-app-shell .conv-mobile-chat .chat-header {
    position: sticky;
    top: 0;
    z-index: 90;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-mobile-nav {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--surface);
    padding: 0 0 0.5rem;
    margin: 0 0 0.35rem;
    border-bottom: 1px solid var(--border);
  }

  /* Pas de padding-top sur le scrollport : sinon bande vide au-dessus du bloc sticky (effet « marge fantôme »). */
  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-content {
    padding-top: 0;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-panel {
    margin-top: 0;
  }

  /**
   * Avis — détail mobile : rangée 1 [retour | titre+méta | note] ;
   * rangée 2 : cellule vide sous le retour, actions alignées sur le bord gauche du titre (colonnes primary+aside).
   */
  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    grid-template-areas:
      "back primary aside"
      ". actions actions";
    column-gap: 0.5rem;
    row-gap: 0.32rem;
    align-items: start;
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--surface);
    padding-top: 0.85rem;
    margin-top: 0;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head > .conv-mobile-back {
    grid-area: back;
    align-self: start;
    margin-top: 0.12rem;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head-body {
    display: contents;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head-primary {
    grid-area: primary;
    min-width: 0;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head-aside {
    grid-area: aside;
    min-width: 0;
    max-width: 100%;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head-actions-row {
    grid-area: actions;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-head-actions-row .reviews-detail-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem;
    width: 100%;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-detail-identity {
    min-width: 0;
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .reviews-score-pill {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .chat-msg-hover-target {
    max-width: 90%;
  }
  .chat-header {
    padding: 0.55rem 0.7rem 0.5rem;
    gap: 0.4rem;
  }

  body.has-app-shell .conv-mobile-chat .chat-header {
    padding-top: 0.5rem;
    padding-bottom: 0.55rem;
  }

  /* Liste mobile : réserve un minimum de largeur au titre (sinon flex-shrink → zone à 0 px). */
  .chat-header-info {
    min-width: min(9.5rem, 44vw);
  }

  /**
   * Détail mobile (conversations / training) : même grille que l’avis voyageur —
   * [retour | titre | badge ou pastille] ; rangée 2 actions alignées sur le titre.
   */
  .conv-mobile-chat .chat-header-upper {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) max-content;
    grid-template-rows: auto auto;
    grid-template-areas:
      "back primary aside"
      ". actions actions";
    column-gap: 0.45rem;
    row-gap: 0.32rem;
    align-items: start;
  }

  .conv-mobile-chat .conv-mobile-back {
    grid-area: back;
    align-self: start;
    margin-top: 0.1rem;
    margin-right: 0.4rem;
  }

  .conv-mobile-chat .chat-header-head-body {
    display: contents;
  }

  .conv-mobile-chat .chat-header-info {
    grid-area: primary;
    flex: unset;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .conv-mobile-chat .chat-header-aside {
    grid-area: aside;
    min-width: 0;
    max-width: 100%;
    justify-self: end;
  }

  .conv-mobile-chat .chat-header-info > div {
    overflow: visible;
  }

  .conv-mobile-chat .chat-header-actions-row {
    grid-area: actions;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
  }

  .conv-mobile-chat .chat-header-actions-row .chat-header-actions {
    width: 100%;
  }

  /** Même décalage que le titre (colonne retour + écart grille). */
  body.has-app-shell .conv-mobile-chat .chat-header-booking {
    padding-left: calc(32px + 0.4rem + 0.45rem);
    box-sizing: border-box;
  }

  .chat-header-state-row {
    min-height: 0;
    gap: 0.24rem;
  }
  .chat-header-state-chip {
    font-size: 0.62rem;
    padding: 0.12rem 0.4rem;
  }
  .chat-header-actions {
    justify-content: space-between;
    gap: 0.25rem;
  }
  .chat-header-quick-actions {
    gap: 0.1rem;
  }
  .chat-header-icon-toggle {
    width: 32px;
    height: 32px;
  }
  .chat-header-actions .btn.btn-sm {
    padding: 0.28rem 0.45rem;
    font-size: 0.72rem;
  }
  .chat-header-actions .autonomy-dropdown-wrapper {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-start;
    min-width: 0;
  }
  .chat-header-actions .autonomy-trigger {
    width: 100%;
    justify-content: space-between;
  }
  .chat-header-actions-overflow {
    flex: 0 0 auto;
  }
  .chat-header-more-menu {
    right: 0;
    min-width: 210px;
  }
  .chat-header-name-row {
    gap: 0.35rem;
  }
  .chat-header-name-row h3 {
    font-size: 0.92rem;
  }
  .chat-header-booking {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.2rem 0.4rem;
    font-size: 0.68rem;
    padding-bottom: 0.05rem;
  }
  .chat-header-booking::-webkit-scrollbar {
    display: none;
  }
  .chat-messages {
    padding: 0.75rem;
  }
  .chat-input-area {
    padding: 0.5rem 0.75rem;
  }
  .conv-section-header {
    padding: 0.5rem 0.75rem;
  }
  .conv-item {
    padding: 0.6rem 0.75rem;
  }
}

/* =============================================
   ACTIVITY LOG PAGE
   ============================================= */

.activity-log-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

.activity-log-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.activity-log-header h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.activity-log-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* Live button */
.btn-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-live.active {
  background: #059669;
  border-color: #059669;
  color: #fff;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
  transition: background 0.3s;
}
.live-dot-active {
  background: #fff;
  animation: live-pulse 1.5s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Filters panel */
.activity-log-filters {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.filter-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.filter-row label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.filter-row select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  min-width: 140px;
}
.filter-row input[type="date"].filter-date-input {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font-size: 0.8rem;
  min-width: 140px;
  font-family: inherit;
}
.filter-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}

/* Log table */
.activity-log-table-wrapper {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.activity-log-empty,
.activity-log-loading {
  padding: 3rem 1.5rem;
  text-align: center;
}

.activity-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.activity-log-table thead th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
}

.activity-log-table tbody .log-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.activity-log-table tbody .log-row:hover {
  background: var(--bg);
}
.activity-log-table tbody .log-row td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

/* Column widths */
.col-time { width: 80px; white-space: nowrap; }
.col-category { width: 110px; }
.col-action { width: 160px; }
.col-summary { /* flex */ }
.col-duration { width: 70px; text-align: right; white-space: nowrap; }

/* Time */
.log-date {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* Category badges */
.log-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.log-cat-agent { background: #dbeafe; color: #1e40af; }
.log-cat-settings { background: #f3e8ff; color: #6b21a8; }
.log-cat-subject { background: #dcfce7; color: #166534; }
.log-cat-chat { background: #fef3c7; color: #92400e; }
.log-cat-drive { background: #e0f2fe; color: #0369a1; }
.log-cat-auth { background: #fee2e2; color: #991b1b; }
.log-cat-company { background: #f1f5f9; color: #475569; }

[data-theme="dark"] .log-cat-agent { background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .log-cat-settings { background: #3b0764; color: #d8b4fe; }
[data-theme="dark"] .log-cat-subject { background: #14532d; color: #86efac; }
[data-theme="dark"] .log-cat-chat { background: #451a03; color: #fcd34d; }
[data-theme="dark"] .log-cat-drive { background: #0c4a6e; color: #7dd3fc; }
[data-theme="dark"] .log-cat-auth { background: #450a0a; color: #fca5a5; }
[data-theme="dark"] .log-cat-company { background: #1e293b; color: #94a3b8; }

/* Action code */
.log-action-code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  background: var(--bg-secondary);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  color: var(--text);
}

/* Summary */
.log-summary {
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
  display: inline-block;
  vertical-align: middle;
}

.log-payload-indicator {
  color: var(--text-secondary, #999);
  margin-left: 0.35rem;
  vertical-align: middle;
}

/* Duration */
.log-duration {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #666);
  font-size: 0.8rem;
}

/* Level styles */
.log-level-warn td {
  background: rgba(251, 191, 36, 0.05);
}
.log-level-error td {
  background: rgba(239, 68, 68, 0.05);
}
.log-level-warn .log-summary { color: #b45309; }
.log-level-error .log-summary { color: #dc2626; }

[data-theme="dark"] .log-level-warn .log-summary { color: #fbbf24; }
[data-theme="dark"] .log-level-error .log-summary { color: #f87171; }

/* border-collapse masque souvent box-shadow sur les td — barre gauche sur la seule colonne Heure */
.activity-log-table tbody tr.log-row.log-activity-error-unread > td.col-time {
  border-left: 3px solid #ef4444;
  padding-left: calc(0.75rem - 3px);
}
[data-theme="dark"] .activity-log-table tbody tr.log-row.log-activity-error-unread > td.col-time {
  border-left-color: #f87171;
}

/* New row animation */
.log-row-new td {
  animation: log-row-flash 2s ease-out;
}
@keyframes log-row-flash {
  0% { background: rgba(5, 150, 105, 0.15); }
  100% { background: transparent; }
}

/* Running row */
.log-row-running td {
  background: rgba(99, 102, 241, 0.06);
}
.log-row-running:hover td {
  background: rgba(99, 102, 241, 0.10);
}
.log-row-running .log-summary {
  color: var(--accent, #667eea);
}

/* Running dot indicator (animated pulsing dot) */
.log-running-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #667eea);
  animation: log-running-pulse 1.5s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 2px;
}
@keyframes log-running-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.75); }
}

/* Live elapsed timer in duration column */
.log-duration-running {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent, #667eea);
  animation: log-timer-pulse 2s ease-in-out infinite;
}
.log-duration-stale {
  color: var(--danger, #e53e3e);
  animation: none;
  opacity: 0.8;
}
@keyframes log-timer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

[data-theme="dark"] .log-row-running td {
  background: rgba(99, 102, 241, 0.1);
}
[data-theme="dark"] .log-row-running:hover td {
  background: rgba(99, 102, 241, 0.15);
}

/* Expanded row */
.log-row-expanded {
  background: var(--bg-secondary, #fafafa) !important;
}
.log-row-expanded td {
  border-bottom-color: transparent;
}

.log-detail-row td {
  padding: 0 !important;
  border-bottom: 1px solid var(--border);
}

.log-detail-content {
  padding: 0.75rem 1rem 1rem;
  background: var(--bg-secondary, #fafafa);
}

.log-detail-section {
  margin-bottom: 0.75rem;
}
.log-detail-section:last-child {
  margin-bottom: 0;
}
.log-detail-section h4 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary, #666);
  margin: 0 0 0.35rem;
}

/* JSON viewer */
.log-json-viewer {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.log-detail-loading {
  padding: 0.75rem 0;
  font-size: 0.8rem;
}

/* Footer */
.activity-log-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
  font-size: 0.8rem;
}
.activity-log-footer-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.btn-delete-logs {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Responsive */
@media (max-width: 768px) {
  .activity-log-page {
    padding: 1rem;
  }
  .col-action,
  .col-duration {
    display: none;
  }
  .log-summary {
    max-width: 200px;
  }
  .activity-log-filters {
    flex-direction: column;
    align-items: stretch;
  }
}


/* =============================================
   PROMPT COMPRESSION UI
   ============================================= */

/* Split button container */
.prompt-compress-split-btn {
  display: inline-flex;
  position: relative;
}

.prompt-compress-split-btn > .btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.prompt-compress-dropdown-toggle {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  min-width: unset !important;
}

[data-theme="dark"] .prompt-compress-dropdown-toggle {
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}

.prompt-compress-dropdown {
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  display: none;
  z-index: 20;
  min-width: 200px;
  overflow: hidden;
}

[data-theme="dark"] .prompt-compress-dropdown {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.prompt-compress-dropdown.open {
  display: block;
}

.prompt-compress-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.prompt-compress-dropdown-item:hover {
  background: var(--bg-secondary);
}

.prompt-compress-dropdown-item svg {
  opacity: 0.6;
  flex-shrink: 0;
}

/* Preview panel */
.prompt-compress-preview {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  flex-shrink: 0;
}

.prompt-compress-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.prompt-compress-preview-header h4 {
  margin: 0;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text);
}

.prompt-compress-stats {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.prompt-compress-stat {
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.prompt-compress-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
}

.prompt-compress-badge-green {
  background: var(--success-bg);
  color: var(--success);
}

.prompt-compress-badge-blue {
  background: var(--accent-glow);
  color: var(--accent);
}

.settings-textarea-preview {
  min-height: 220px;
  max-height: 400px;
  font-size: 0.82rem;
  opacity: 0.9;
  resize: vertical;
}

.prompt-compress-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Settings: Compression & translation — sub-groups */
.compression-group + .compression-group {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.compression-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.compression-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.compression-group-hint {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

/* Settings: Compression & translation toggles */
.compression-toggles {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.settings-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.settings-toggle-row .toggle-switch {
  margin-top: 0.15rem;
}

.settings-toggle-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.settings-toggle-info strong {
  font-size: 0.85rem;
  color: var(--text);
}

.settings-toggle-info .text-muted {
  font-size: 0.78rem;
}

.settings-threshold-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: calc(38px + 0.75rem);
}

.settings-threshold-row label {
  font-size: 0.82rem;
  color: var(--muted);
}

.settings-input-sm {
  width: 80px;
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

.settings-unsaved-hint {
  font-size: 0.8rem;
}

.settings-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1rem 0;
}

.settings-sub-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.4rem;
}

.settings-naturality-sub {
  margin-top: 0.25rem;
}

.settings-delay-row {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
}
.settings-delay-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 70px;
}
.settings-delay-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
}
.settings-delay-field input {
  width: 100%;
  box-sizing: border-box;
}

/* ---- Prompt Inspector ---- */

.chat-input-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-input-actions-inline {
  flex: 0 0 auto;
}

.chat-input-actions .pi-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.8;
  transition: opacity 0.15s, color 0.15s;
}
.chat-input-actions .pi-open-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.prompt-inspector-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.prompt-inspector-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: min(98vw, 1400px);
  max-width: calc(100vw - 2rem);
  height: min(85dvh, calc(100dvh - 2rem));
  max-height: calc(100dvh - 2rem);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.prompt-inspector-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.prompt-inspector-header h3 {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  font-family: monospace;
}

.prompt-inspector-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.prompt-inspector-close:hover {
  color: var(--text);
}

.prompt-inspector-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0.5rem;
}

.prompt-inspector-loading {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.8rem;
}

.msg-debug-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}

.msg-debug-model {
  font-weight: 600;
  color: var(--accent);
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.msg-debug-duration {
  color: var(--muted);
}

.msg-debug-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--muted);
  font-size: 0.68rem;
  border: 1px solid color-mix(in srgb, var(--muted) 35%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

.msg-debug-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  height: 11px;
}

.msg-debug-copy-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}

@media (orientation: portrait) and (min-width: 769px) {
  .prompt-inspector-overlay {
    padding: 0.6rem;
    align-items: flex-start;
  }

  .prompt-inspector-modal {
    width: min(98vw, 1400px);
    margin-top: 0;
    height: min(92dvh, calc(100dvh - 1.2rem));
    max-height: calc(100dvh - 1.2rem);
  }
}

.msg-debug-copy-btn {
  all: unset;
  cursor: pointer;
  font-size: 0.62rem;
  line-height: 1;
  padding: 0.24rem 0.44rem;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted);
  white-space: nowrap;
}

.msg-debug-copy-btn:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

/* Copy icon button (reusable, icon only, no outline) */
.copy-icon-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem;
  border-radius: 4px;
  color: var(--muted);
}
.copy-icon-btn:hover:not(:disabled) {
  color: var(--accent);
}
.copy-icon-btn:disabled {
  cursor: default;
  opacity: 0.4;
}

/* Pipeline warnings in message-debug */
.msg-debug-warnings {
  padding: 0.5rem 0.75rem;
  background: rgba(184, 134, 11, 0.08);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}
.msg-debug-warnings-header {
  font-weight: 600;
  color: #b8860b;
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.msg-debug-warning-item {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 0.2rem 0.5rem;
  margin-top: 0.25rem;
}
.msg-debug-warning-code {
  flex-shrink: 0;
  font-weight: 600;
  color: #b8860b;
}
.msg-debug-warning-severity {
  width: fit-content;
  border: 1px solid #b8860b;
  border-radius: 999px;
  padding: 0.02rem 0.28rem;
  font-size: 0.62rem;
  color: #b8860b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.msg-debug-warning-message {
  flex: 1;
  color: var(--text);
}
.msg-debug-warning-details {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  max-height: 120px;
  overflow: auto;
  padding: 0.38rem 0.48rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-muted);
  font-size: 0.68rem;
}

/* Self-Eval section in message-debug */
.msg-debug-eval {
  padding: 0.5rem 0.75rem;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}
.msg-debug-eval-header {
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 0.35rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.msg-debug-eval-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem 0.6rem;
  align-items: baseline;
}
.msg-debug-eval-label {
  color: var(--muted);
  font-size: 0.7rem;
}
.msg-debug-eval-value {
  font-weight: 500;
}
.eval-conf-high { color: #22c55e; }
.eval-conf-medium { color: #f59e0b; }
.eval-conf-low { color: #ef4444; }
[data-theme="dark"] .eval-conf-high { color: #4ade80; }
[data-theme="dark"] .eval-conf-medium { color: #fbbf24; }
[data-theme="dark"] .eval-conf-low { color: #f87171; }
.msg-debug-eval-reason {
  margin-top: 0.3rem;
  color: var(--muted);
  font-style: italic;
  font-size: 0.7rem;
}

.msg-debug-runs {
  display: flex;
  gap: 0.4rem;
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  flex-shrink: 0;
}

.msg-debug-run-tab {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0.28rem 0.55rem;
  border-radius: 5px;
  border: 1px solid color-mix(in srgb, var(--muted) 45%, transparent);
  color: var(--muted);
  font-size: 0.68rem;
  white-space: nowrap;
}

.msg-debug-run-tab small {
  opacity: 0.75;
  font-size: 0.6rem;
}

.msg-debug-run-tab.active {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.msg-debug-group-title {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 0.3rem 0.15rem 0.15rem 0.15rem;
}

.msg-debug-group-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.msg-debug-inline-link-btn {
  all: unset;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.64rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  margin-right: 0.2rem;
}

.msg-debug-inline-link-btn:hover {
  color: var(--accent);
}

.msg-debug-summary {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 0 0 auto;
  min-height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.15rem 0.1rem 0.2rem 0.1rem;
}

.msg-debug-summary-table-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

.msg-debug-summary-table {
  width: 100%;
  min-width: 0;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.msg-debug-summary-table thead th {
  text-align: left;
  vertical-align: top;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.55rem;
}

.msg-debug-summary-table tbody td {
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  vertical-align: top;
}

.msg-debug-summary-table .msg-debug-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.msg-debug-summary-table thead .msg-debug-num {
  max-width: 6.2rem;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.15;
}

.msg-debug-summary-table tbody .msg-debug-num {
  white-space: nowrap;
}

.msg-debug-summary-agent {
  font-weight: 600;
}

.msg-debug-summary-extra {
  color: var(--muted);
}

.msg-debug-summary-llm-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.msg-debug-summary-llm-name {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.msg-debug-summary-llm-right {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
  flex-shrink: 0;
}

.msg-debug-summary-llm-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
}

.msg-debug-summary-total-row td {
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-bottom: none;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.msg-debug-timeline {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.5rem 0.5rem;
}

.msg-debug-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: 0.45rem;
}

.msg-debug-timeline-title {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.msg-debug-timeline-total {
  font-size: 0.66rem;
  color: var(--muted);
}

.msg-debug-timeline-empty {
  font-size: 0.67rem;
  color: var(--muted);
  padding: 0.15rem 0.1rem 0.05rem;
}

.msg-debug-timeline-grid {
  --timeline-rows: 1;
  --timeline-step-color-agent: color-mix(in srgb, var(--accent) 78%, var(--accent-end) 22%);
  --timeline-step-color-tool: color-mix(in srgb, var(--success) 78%, #0f766e 22%);
  --timeline-step-color-pipeline: color-mix(in srgb, var(--warning) 82%, #b45309 18%);
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  grid-template-rows: repeat(var(--timeline-rows), minmax(20px, auto));
  gap: 0.25rem 0.45rem;
  position: relative;
}

.msg-debug-timeline-label {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  font-size: 0.66rem;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-debug-timeline-kind {
  color: var(--muted);
  flex: 0 0 auto;
}

.msg-debug-timeline-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-debug-timeline-track-lines {
  grid-column: 2;
  grid-row: 1 / -1;
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      to right,
      color-mix(in srgb, var(--border) 70%, transparent) 0,
      color-mix(in srgb, var(--border) 70%, transparent) 1px,
      transparent 1px,
      transparent 10%
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--border) 80%, transparent) 0,
      color-mix(in srgb, var(--border) 80%, transparent) 1px,
      transparent 1px,
      transparent 24px
    );
  position: relative;
}

.msg-debug-timeline-bar {
  grid-column: 2;
  align-self: center;
  position: relative;
  z-index: 1;
  height: 16px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 0.25rem;
  overflow: hidden;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--timeline-step-color-agent);
}

.msg-debug-timeline-bar.msg-debug-timeline-kind-tool {
  background: var(--timeline-step-color-tool);
}

.msg-debug-timeline-bar.msg-debug-timeline-kind-pipeline {
  background: var(--timeline-step-color-pipeline);
}

.msg-debug-timeline-bar.msg-debug-timeline-phase-thinking {
  filter: brightness(1.18);
}

.msg-debug-timeline-bar.msg-debug-timeline-phase-output {
  filter: brightness(0.96);
}

/* Fallback attempts: muted + italic for quick visual distinction */
.msg-debug-timeline-label.msg-debug-timeline-fallback .msg-debug-timeline-text {
  color: var(--muted);
  font-style: italic;
}

.msg-debug-timeline-bar.msg-debug-timeline-fallback {
  opacity: 0.72;
}

.msg-debug-timeline-duration-label.msg-debug-timeline-fallback {
  color: var(--muted);
  font-style: italic;
}

.msg-debug-timeline-bar-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.msg-debug-timeline-duration-label {
  grid-column: 2;
  position: relative;
  align-self: center;
  z-index: 3;
  font-size: 0.6rem;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border-radius: 3px;
  padding: 0 2px;
}

.msg-debug-timeline-axis {
  display: grid;
  grid-template-columns: minmax(190px, 230px) minmax(0, 1fr);
  column-gap: 0.45rem;
  margin-top: 0.3rem;
}

.msg-debug-timeline-axis-track {
  position: relative;
  height: 16px;
}

.msg-debug-timeline-axis-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.56rem;
  color: var(--muted);
  white-space: nowrap;
  line-height: 1;
}

.msg-debug-timeline-axis-tick::before {
  content: '';
  display: block;
  width: 1px;
  height: 5px;
  margin: 0 auto 1px;
  background: color-mix(in srgb, var(--border) 85%, transparent);
}

.msg-debug-tools-inline {
  padding: 0.2rem 0.2rem 0.1rem 0.2rem;
}

.msg-debug-tools-title {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.msg-debug-tools-empty {
  font-size: 0.68rem;
  color: var(--muted);
}

.msg-debug-tools-list-plain {
  font-size: 0.68rem;
  color: var(--text);
  line-height: 1.45;
}

.msg-debug-summary-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.2rem;
}

.msg-debug-copy-btn-outline {
  background: transparent;
  border-color: color-mix(in srgb, var(--muted) 50%, transparent);
}

.msg-debug-copy-btn-outline:hover {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.msg-debug-summary-single {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
  padding-top: 0.05rem;
  padding-bottom: 0.45rem;
}

.msg-debug-summary-single-table thead th {
  font-size: 0.6rem;
}

.msg-debug-stats {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  flex: 1;
  min-width: 0;
}

.msg-debug-toggle {
  all: unset;
  cursor: pointer;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted);
  background: rgba(99, 102, 241, 0.08);
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s;
}
.msg-debug-toggle:hover {
  background: rgba(99, 102, 241, 0.18);
  color: var(--accent);
}

.msg-debug-stat-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.msg-debug-val {
  font-weight: 600;
  color: var(--text);
}

.msg-debug-dim {
  color: var(--muted);
  font-weight: 400;
}

.msg-debug-badge {
  font-weight: 600;
  font-size: 0.65rem;
  padding: 0 4px;
  border-radius: 3px;
  background: rgba(99, 102, 241, 0.08);
}

.msg-debug-cache {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
}

.msg-debug-saved {
  color: #10b981;
  background: rgba(16, 185, 129, 0.08);
}

.msg-debug-cost-total {
  font-weight: 700;
  color: #10b981;
}

/* State Snapshot tab */
.msg-debug-state-snapshot {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
}
.msg-debug-state-snapshot.msg-debug-run-state {
  flex: 1 1 0;
  min-height: 0;
}
.msg-debug-state-snapshot-empty { padding: 1rem; color: var(--muted); font-size: 0.85rem; }
.msg-debug-state-summary-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; font-size: 0.75rem; }
.msg-debug-state-summary-label { color: var(--muted); }
.msg-debug-state-diff > div { margin-bottom: 0.35rem; font-size: 0.75rem; }
.msg-debug-state-diff-services { margin-bottom: 0.35rem; }
.msg-debug-state-diff-services-label { font-size: 0.75rem; color: var(--muted); }
.msg-debug-state-diff-services-list { margin: 0.2rem 0 0; padding-left: 1rem; font-size: 0.75rem; }
.msg-debug-diff-badge { display: inline-block; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.65rem; margin-right: 0.4rem; }
.msg-debug-diff-opened { background: rgba(34, 197, 94, 0.2); color: #16a34a; }
.msg-debug-diff-closed { background: rgba(239, 68, 68, 0.15); color: #dc2626; }
.msg-debug-diff-reopened { background: rgba(59, 130, 246, 0.15); color: #2563eb; }
.msg-debug-diff-updated { background: rgba(234, 179, 8, 0.15); color: #ca8a04; }
.msg-debug-state-diff-empty { color: var(--muted); font-size: 0.8rem; }
.msg-debug-state-diff-legend { font-weight: 400; color: var(--muted); font-size: 0.65rem; }
.msg-debug-topics-block { margin-bottom: 0.75rem; }
.msg-debug-topics-sub { font-weight: 500; font-size: 0.7rem; margin-bottom: 0.25rem; color: var(--muted); }
.msg-debug-topics-list, .msg-debug-services-list { margin: 0; padding-left: 1rem; font-size: 0.75rem; }
.msg-debug-topic-key, .msg-debug-service-name { font-weight: 500; color: var(--text); }
.msg-debug-topic-ops-table { width: 100%; font-size: 0.7rem; border-collapse: collapse; }
.msg-debug-topic-ops-table th, .msg-debug-topic-ops-table td { padding: 0.2rem 0.4rem; text-align: left; border: 1px solid var(--border, rgba(0,0,0,0.1)); }
.msg-debug-state-section-header { justify-content: space-between; }
.msg-debug-state-section-header .copy-icon-btn { flex-shrink: 0; }
/* Aligner la typo sur le reste du message debug (sans mono ni gras inutile), sauf les blocs JSON */
.msg-debug-state-snapshot-section .pi-section-header { font-family: inherit; font-weight: 500; font-size: 0.7rem; }
.msg-debug-state-snapshot-section .pi-section-content { white-space: normal; font-family: inherit; font-size: 0.75rem; }
.msg-debug-state-snapshot-section .pi-section-content .msg-debug-other-facts-json,
.msg-debug-state-snapshot-section .pi-section-content .msg-debug-state-raw-json { white-space: pre-wrap; font-family: var(--font-mono, 'Fira Code', 'Cascadia Code', monospace); }
.msg-debug-other-facts-json, .msg-debug-state-raw-json { font-size: 0.65rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; margin: 0.5rem 0 0; }
.msg-debug-facts-empty { color: var(--muted); font-size: 0.8rem; }

.msg-debug-run-subtabs { display: flex; gap: 0.25rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border, rgba(0,0,0,0.08)); flex-shrink: 0; }
.msg-debug-run-subtab { padding: 0.25rem 0.6rem; font-size: 0.7rem; border-radius: 4px; border: 1px solid var(--border, rgba(0,0,0,0.12)); background: var(--bg-secondary, rgba(0,0,0,0.04)); cursor: pointer; }
.msg-debug-run-subtab:hover { background: color-mix(in srgb, var(--muted) 15%, transparent); }
.msg-debug-run-subtab.active { background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: var(--primary); }

.pi-origin-raw-response .pi-section-header {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10b981;
}

.pi-origin-raw-response .pi-section-role {
  background: #10b981;
}

/* ===== Section-based layout ===== */

.pi-sections {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.pi-section {
  border-left: 4px solid var(--pi-color, var(--muted));
  display: flex;
  flex-direction: column;
}

.pi-section.pi-collapsed .pi-section-header {
  opacity: 0.7;
}

.pi-section.pi-collapsed .pi-section-content {
  display: none;
}

.pi-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.15rem 0.6rem;
  font-size: 0.55rem;
  font-family: monospace;
  letter-spacing: 0.03em;
  background: color-mix(in srgb, var(--pi-color, var(--muted)) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--pi-color, var(--muted)) 12%, transparent);
  flex-shrink: 0;
  user-select: none;
}

.pi-section-chevron {
  font-size: 0.65rem;
  opacity: 0.4;
  flex-shrink: 0;
  width: 0.7rem;
  text-align: center;
}

.pi-section-header:hover .pi-section-chevron { opacity: 0.8; }

.pi-section-role {
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.4;
  font-size: 0.5rem;
}

.pi-section-label {
  font-weight: 600;
  color: var(--pi-color, var(--muted));
}

.pi-section-stats {
  margin-left: auto;
  opacity: 0.6;
  font-size: 0.5rem;
  color: var(--muted);
}

.pi-section-content {
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem;
  line-height: 1.55;
  font-family: 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  background: var(--bg-secondary, rgba(0, 0, 0, 0.08));
  outline: none;
  min-height: 1.5em;
  overflow: hidden;
}

.pi-section-content:focus {
  background: color-mix(in srgb, var(--pi-color, var(--muted)) 4%, var(--bg-secondary, rgba(0, 0, 0, 0.1)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pi-color, var(--muted)) 25%, transparent);
}

/* ===== Origin colors (One Dark palette) ===== */

.pi-origin-system-general        { --pi-color: #61afef; } /* blue */
.pi-origin-property-info         { --pi-color: #56b6c2; } /* teal */
.pi-origin-guide-toc             { --pi-color: #78d1b6; } /* mint */
.pi-origin-general-context       { --pi-color: #abb2bf; } /* silver */
.pi-origin-booking-context       { --pi-color: #e5c07b; } /* gold */
.pi-origin-rag-results           { --pi-color: #be5046; } /* rust */
.pi-origin-rag-blocks            { --pi-color: #d19a66; } /* amber */
.pi-origin-rag-block-prompts     { --pi-color: #c678dd; } /* purple */
.pi-origin-blocks-toc            { --pi-color: #e5c07b; } /* gold */
.pi-origin-training-prompt       { --pi-color: #e06c75; } /* rose */
.pi-origin-response-instructions { --pi-color: #98c379; } /* green */
.pi-origin-trivial-instruction   { --pi-color: #d19a66; } /* amber */
.pi-origin-sentiment-instruction { --pi-color: #e5c07b; } /* gold */
.pi-origin-tools                 { --pi-color: #56b6c2; } /* cyan */
.pi-origin-tool-calls            { --pi-color: #61afef; } /* blue */
.pi-origin-language-instruction  { --pi-color: #98c379; } /* green */
.pi-origin-escalation-instruction { --pi-color: #e06c75; } /* rose */
.pi-origin-chat-history          { --pi-color: #7c9ce0; } /* periwinkle */
.pi-origin-none                  { --pi-color: #abb2bf; } /* grey */
.pi-origin-error                 { --pi-color: #e06c75; } /* red */
.pi-origin-router-system         { --pi-color: #e5c07b; } /* amber */
.pi-origin-router-input          { --pi-color: #d19a66; } /* orange */
.pi-origin-router-output         { --pi-color: #56b6c2; } /* teal */
.pi-origin-router-decision       { --pi-color: #61afef; } /* blue */
.pi-origin-router-meta           { --pi-color: #98c379; } /* green */

/* ===== Markdown formatting ===== */

.pi-section-content .pi-heading {
  font-weight: 700;
  color: var(--text);
}

.pi-section-content .pi-h1 {
  font-size: 0.82rem;
}

.pi-section-content .pi-mark {
  opacity: 0.25;
  font-weight: 400;
  font-style: normal;
}

.pi-section-content strong {
  font-weight: 700;
  color: var(--text);
}

.pi-section-content em {
  font-style: italic;
}

.pi-section-content code.pi-inline-code {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.05em 0.3em;
  border-radius: 3px;
  font-size: 0.95em;
}

.pi-section-content .pi-separator {
  opacity: 0.2;
}

.pi-section-content .pi-fence {
  opacity: 0.3;
}

.pi-section-content .pi-code {
  opacity: 0.85;
}

/* ===== JSON syntax highlighting ===== */

.pi-section-content .pi-json-key  { color: #e06c75; }
.pi-section-content .pi-json-str  { color: #98c379; }
.pi-section-content .pi-json-num  { color: #d19a66; }
.pi-section-content .pi-json-bool { color: #c678dd; }
.pi-section-content .pi-json-null { color: #56b6c2; }

.prompt-inspector-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.prompt-inspector-token-count {
  font-size: 0.65rem;
  font-family: monospace;
  color: var(--muted);
  margin-right: auto;
}

.prompt-inspector-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: background 0.15s;
}

.prompt-inspector-btn-close {
  background: transparent;
  color: var(--text);
}
.prompt-inspector-btn-close:hover {
  background: var(--border);
}

/* =============================================
   Alerting settings
   ============================================= */

.alerting-property-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ha-summary-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ha-summary-text {
  font-size: 0.9rem;
  font-family: var(--font-mono, monospace);
  color: var(--text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ha-summary-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.alerting-property-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alerting-property-name {
  min-width: 140px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
}

.alerting-chat-id-input {
  flex: 1;
  max-width: 220px;
}

/* Alert test button in conversation header */
.chat-alert-btn {
  position: relative;
}

.chat-alert-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  z-index: 100;
  min-width: 160px;
  padding: 0.25rem 0;
}

.chat-alert-menu.visible {
  display: block;
}

.chat-alert-menu button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
}

.chat-alert-menu button:hover {
  background: var(--border);
}

.chat-alert-menu button.alert-urgent {
  color: var(--danger, #dc3545);
}

/* ============================== */
/* RAG Blocks Management          */
/* ============================== */

.rag-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.rag-toolbar-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.rag-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rag-filter-select {
  min-width: 180px;
}

.rag-count {
  font-size: 0.82rem;
  white-space: nowrap;
}

.rag-blocks-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rag-blocks-list .settings-card {
  border-radius: 0;
  margin-bottom: -1px;
}

.rag-blocks-list .settings-card:first-child {
  border-radius: var(--radius, 0.5rem) var(--radius, 0.5rem) 0 0;
}

.rag-blocks-list .settings-card:last-child {
  border-radius: 0 0 var(--radius, 0.5rem) var(--radius, 0.5rem);
  margin-bottom: 0;
}

.rag-blocks-list .settings-card:only-child {
  border-radius: var(--radius, 0.5rem);
}

.rag-block-item {
  transition: background 0.15s, box-shadow 0.15s;
}

.rag-block-item:hover {
  background: var(--hover-bg, rgba(128, 128, 128, 0.05));
}

.rag-block-item.rag-dragging {
  opacity: 0.5;
}

.rag-block-item.rag-drag-over {
  box-shadow: inset 0 -2px 0 var(--accent, #4a9eff);
}

.rag-block-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}

.rag-block-drag-handle {
  cursor: grab;
  color: var(--muted, #999);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0.25rem;
  opacity: 0.4;
  transition: opacity 0.15s;
}

.rag-block-item:hover .rag-block-drag-handle {
  opacity: 0.8;
}

.rag-block-drag-handle:active {
  cursor: grabbing;
}

.rag-block-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.rag-block-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rag-block-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}

.rag-block-scope {
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: var(--border, #e0e0e0);
  color: var(--muted, #999);
  white-space: nowrap;
}

.rag-block-scope-global {
  background: var(--accent-bg, rgba(74, 158, 255, 0.12));
  color: var(--accent, #4a9eff);
}

.rag-block-prompt-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.72rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  background: rgba(198, 120, 221, 0.12);
  color: #c678dd;
  white-space: nowrap;
}

.rag-block-preview {
  font-size: 0.8rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.rag-block-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s;
}

.rag-block-item:hover .rag-block-actions {
  opacity: 1;
}

.rag-editor-card {
  border-color: var(--accent, #4a9eff);
  border-width: 2px;
}

.rag-textarea {
  min-height: 120px;
  font-family: var(--mono-font, 'Fira Code', monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

.rag-textarea-prompt {
  min-height: 80px;
  font-family: var(--mono-font, 'Fira Code', monospace);
  font-size: 0.85rem;
  line-height: 1.5;
  resize: vertical;
}

.rag-textarea-json-invalid {
  border-color: #e06c75;
  box-shadow: 0 0 0 2px rgba(224, 108, 117, 0.2);
}

.rag-textarea-json-invalid:focus {
  border-color: #e06c75;
  box-shadow: 0 0 0 3px rgba(224, 108, 117, 0.25);
}

.rag-json-error {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #e06c75;
}

.rag-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  text-align: center;
}

.rag-empty p:first-of-type {
  font-weight: 500;
  color: var(--text);
}

.rag-feedback {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius, 0.5rem);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s;
}

.rag-feedback.visible {
  opacity: 1;
}

.rag-feedback-ok {
  background: rgba(152, 195, 121, 0.12);
  color: #98c379;
}

.rag-feedback-err {
  background: rgba(224, 108, 117, 0.12);
  color: #e06c75;
}

/* Property picker (multi-select checkboxes) */
.rag-property-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.rag-property-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-primary, #c9d1d9);
}

.rag-property-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent, #61afef);
  cursor: pointer;
  flex-shrink: 0;
}

.rag-property-global {
  font-weight: 500;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  margin-bottom: 0.25rem;
}

.rag-property-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.25rem 1rem;
  padding-left: 0.25rem;
  transition: opacity 0.2s;
}

.rag-property-list-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ============================== */
/* RAG Split Layout               */
/* ============================== */

.rag-split-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
}

.rag-split-layout {
  display: flex;
  min-height: 400px;
}

.rag-block-list-panel {
  width: 260px;
  min-width: 260px;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.rag-block-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  margin: 1px 0.375rem;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  width: calc(100% - 0.75rem);
  transition: background 0.15s;
}

.rag-block-list-item:hover {
  background: var(--hover-bg, rgba(128, 128, 128, 0.08));
}

.rag-block-list-item.active {
  background: var(--accent-bg, rgba(74, 158, 255, 0.12));
  color: var(--accent, #4a9eff);
}

.rag-block-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rag-block-list-title {
  font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.rag-block-list-meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.rag-editor-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  min-width: 0;
}

.rag-editor-panel.rag-editor-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rag-editor-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.rag-empty-inline {
  padding: 2rem 1rem;
  text-align: center;
}

@media (max-width: 640px) {
  .rag-split-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .rag-toolbar-left,
  .rag-toolbar-right {
    justify-content: space-between;
  }

  .rag-split-layout {
    flex-direction: column;
    min-height: auto;
  }

  .rag-block-list-panel {
    width: 100%;
    min-width: 0;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .rag-editor-panel {
    display: none;
  }

  .rag-split-layout.rag-mobile-show-editor .rag-block-list-panel {
    display: none;
  }

  .rag-split-layout.rag-mobile-show-editor .rag-editor-panel {
    display: flex;
  }

  .rag-property-list {
    grid-template-columns: 1fr;
  }
}

/* ============================== */
/* Prompt Collapsible Groups      */
/* ============================== */

.prompt-list-title-clickable {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  user-select: none;
}

.prompt-list-title-clickable:hover {
  opacity: 0.8;
}

.prompt-group-chevron {
  flex-shrink: 0;
  transition: transform 0.2s;
}

.prompt-group-chevron.open {
  transform: rotate(90deg);
}

.prompt-group-count {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--muted);
  margin-left: auto;
}

/* =============================================
   PUBLIC SHARE PAGE
   ============================================= */

.share-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
}

.share-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 0.9rem 1rem;
  margin-bottom: 0.8rem;
}

.share-loading,
.share-error {
  text-align: center;
}

.share-meta-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.share-meta-header h2 {
  margin: 0;
  font-size: 1.02rem;
}

.share-page-title {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text);
}

.share-meta-priority {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.share-priority-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0.5rem;
  border: none;
  border-radius: 999px;
  background: var(--surface-2);
  min-width: fit-content;
  min-height: 28px;
}

.share-priority-icon {
  display: inline-flex;
  color: var(--accent);
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.share-priority-icon svg {
  display: block;
}

.share-priority-body {
  display: flex;
  align-items: center;
  min-width: 0;
}

.share-priority-body strong {
  font-size: 0.7rem;
  color: var(--text-secondary);
  font-weight: 700;
}

.share-priority-body span {
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.2;
  word-break: break-word;
}

.share-disabled-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--warning-bg, rgba(245, 158, 11, 0.15));
  color: var(--warning, #f59e0b);
}

.share-disable-btn {
  background: #fff;
  border: 1px solid var(--danger);
  color: var(--danger);
}

.share-disable-btn:hover:not(:disabled) {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
}

.share-meta-inline {
  display: block;
}

.share-stay-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0;
  margin: 0 0 0.6rem 0;
}

.share-stay-item {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-2);
  min-height: 28px;
}

.share-stay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.share-stay-item > span:last-child {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.1;
}

.share-inline-item {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  border: none;
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
  margin: 0 0.38rem 0 0;
  background: var(--surface-2);
  max-width: 100%;
  vertical-align: top;
  min-height: 28px;
}

.share-inline-item svg {
  color: var(--muted);
  flex-shrink: 0;
}

.share-inline-item span {
  font-size: 0.92rem;
  color: var(--text);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.share-inline-item-channel {
  padding: 0.28rem 0.44rem;
}

.share-channel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.share-chat {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.share-chat-messages {
  max-height: none;
  min-height: 120px;
}

.share-msg-author {
  font-size: 0.68rem;
  line-height: 1;
  color: var(--text-secondary);
  text-transform: lowercase;
  margin: 0 0 0.2rem;
  max-width: 80%;
}

.share-msg-author-left {
  align-self: flex-start;
}

.share-msg-author-right {
  align-self: flex-end;
  text-align: right;
}

.share-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.share-link-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.share-msg-footer {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  margin-top: -0.45rem;
}

.share-copy-btn {
  opacity: 0;
  gap: 0;
  padding: 0.1rem;
  min-width: 16px;
}

.share-msg-footer:not(.chat-msg-footer-guest) .share-copy-btn {
  order: -1;
}

.share-chat .chat-msg:hover + .share-msg-footer .share-copy-btn {
  opacity: 1;
}

.share-msg-footer:hover .share-copy-btn {
  opacity: 0;
}

.share-page-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .chat-share-panel {
    margin: 0.65rem 0.5rem 0.45rem;
    border-radius: 10px;
  }

  .share-page {
    padding: 0.75rem;
  }

  .share-meta-priority {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .share-inline-item {
    max-width: 100%;
  }

  .chat-share-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .chat-share-toolbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .chat-share-result {
    padding: 0.5rem 0.7rem;
  }

  .chat-share-companion {
    padding: 0.55rem 0.7rem 0.65rem;
  }

  .chat-share-companion-textarea {
    min-height: 84px;
  }

  .chat-msg-select {
    left: -1.25rem;
  }
}

@media (max-width: 560px) {
  .share-stay-strip {
    display: flex;
    width: 100%;
  }

  .share-inline-item {
    width: auto;
    margin-right: 0.32rem;
  }
}

/* ----- Persona page ----- */
.persona-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}
.persona-filter-btn {
  font-size: 0.75rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
}
.persona-filter-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.persona-filter-count {
  margin-left: 0.25rem;
  opacity: 0.9;
}
.persona-item-preview {
  font-size: 0.8rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.persona-item-meta {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.persona-load-more {
  padding: 0.75rem;
  text-align: center;
}
.persona-all-summary {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
}
.persona-all-summary .persona-all-more {
  font-style: italic;
}
.persona-list-summary {
  padding: 0.4rem 1rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex-shrink: 0;
}
.persona-list-summary .persona-all-more {
  font-style: italic;
}
.persona-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}
.persona-detail-card {
  padding: 0.5rem 1rem 1rem 1rem;
  max-width: 42rem;
}
.persona-detail-field {
  margin-bottom: 0.5rem;
}
.persona-detail-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.25rem;
  color: var(--text-secondary);
}
.persona-content-textarea {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  line-height: 1.5;
  padding: 0.6rem 0.75rem;
}
.persona-detail-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}
.persona-detail-meta div { margin-bottom: 0.25rem; }
.persona-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.persona-detail-actions .btn-danger { color: var(--danger); border-color: var(--danger); }
.persona-detail-actions .btn-danger:hover { background: var(--danger-bg); }
.persona-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}
.persona-placeholder p { margin: 0; }
.persona-detail-loading {
  padding: 2rem;
  color: var(--muted);
}
.persona-db-stats {
  margin: 0 0 0.35rem 0;
  font-size: 0.7rem;
  line-height: 1.2;
}
.persona-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.persona-toolbar .conv-top-menus { flex: 1; min-width: 0; }
/* Bouton sélection multiple : icône 2 personnages uniquement, même style que les filtres */
.persona-bulk-trigger {
  flex-shrink: 0;
  margin-left: 0.35rem;
  cursor: pointer;
}
.persona-bulk-trigger:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}
.persona-bulk-trigger input.persona-bulk-hidden-check {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.persona-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border);
}
.persona-bulk-count { font-size: 0.8rem; margin-right: 0.5rem; }
.persona-bulk-toggle { margin-top: 0.35rem; }
.persona-item-checkbox { margin-right: 0.5rem; flex-shrink: 0; }
.persona-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
}
.persona-item-main .conv-item-preview.persona-item-preview { flex: 1; min-width: 0; }
.persona-item-main .persona-badge {
  flex-shrink: 0;
  margin: 0;
  padding-left: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.persona-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: var(--bg-muted);
  color: var(--muted);
}
.persona-badge-icon { flex-shrink: 0; opacity: 0.9; }
.persona-badge-similar { background: var(--info-bg); color: var(--info); }
.persona-badge-similar .persona-badge-icon { opacity: 1; }
.conv-item-bulk { display: flex; align-items: flex-start; }
.conv-chat.persona-detail {
  padding-top: 0;
  overflow-y: auto;
}
.persona-detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  min-height: 2.5rem;
  flex-wrap: wrap;
}
.persona-detail-header-left {
  flex-shrink: 0;
}
.persona-detail-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.persona-detail-toggle-caption {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, var(--muted));
}
.persona-detail-status-wrap {
  flex: 1;
  min-width: 8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.persona-detail-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
}
.persona-status-review {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}
.persona-status-active {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border, transparent);
}
.persona-status-inactive {
  background: var(--bg-muted);
  color: var(--muted);
  border: 1px solid var(--border);
}
.persona-detail-id {
  margin: 0 0 0.65rem 0;
  font-size: 0.7rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.persona-detail-id code { font-size: 0.65rem; user-select: all; }
.persona-detail-header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.persona-save-status { font-size: 0.75rem; }
.btn-icon { padding: 0.35rem; }
.btn-ghost { background: transparent; border: none; color: var(--muted); }
.btn-ghost:hover { color: var(--fg); background: var(--bg-muted); }
.persona-trash-btn:hover:not(:disabled) { color: var(--danger); background: var(--danger-bg); }
.persona-detail-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.persona-detail-actions-row .btn { flex-shrink: 0; }
.persona-similarity-block {
  margin-top: 1rem;
}
.persona-similarity-title {
  font-size: 0.9rem;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
}
.persona-similarity-box {
  padding: 1rem;
  background: var(--bg-muted);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.persona-similarity-diff {
  font-size: 0.85rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 0.75rem;
  max-height: 160px;
  overflow-y: auto;
  line-height: 1.5;
}
.persona-diff-same { color: var(--text); }
.persona-diff-add {
  background: var(--success-bg);
  color: var(--success);
  padding: 0 1px;
  border-radius: 2px;
}
.persona-diff-remove {
  background: var(--danger-bg);
  color: var(--danger);
  text-decoration: line-through;
  padding: 0 1px;
  border-radius: 2px;
}
.persona-similarity-diff-removed {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.persona-diff-removed-label {
  color: var(--text-muted);
  font-size: 0.8em;
  margin-right: 0.25rem;
}
.persona-similarity-actions { margin-top: 0.5rem; }
.persona-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.persona-modal {
  background: var(--bg);
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 360px;
}
.persona-modal p { margin: 0 0 1rem 0; }
.persona-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* ListPanel shared component */
/* IMPORTANT: le host <list-panel> est un flex-item dans .conv-sidebar.
   Sans flex:1 + min-height:0, il grandit avec le contenu et .conv-layout (overflow:hidden) coupe sans scroll. */
.conv-sidebar > list-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
.conv-sidebar > list-panel > .list-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
.list-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
}
.list-panel .conv-sidebar-header {
  flex-shrink: 0;
  padding: 0.75rem 1rem 0;
  /* Au-dessus de .list-panel-scroll : sinon les menus Filtres/Actions (position absolute) passent sous la liste. */
  position: relative;
  z-index: 6;
}
/* Toolbar slot : padding gauche/droite pour ne pas coller, peu d’espace au-dessus, marge sous les dropdowns */
.list-panel-toolbar {
  display: block;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}
.list-panel .conv-sidebar-header .conv-top-toolbar {
  margin-top: 0;
  margin-bottom: 0;
}

/* Légère séparation entre sections repliables (liste conversations / entraînement). */
.list-panel .conv-section + .conv-section {
  margin-top: 0.35rem;
}
.list-panel .conv-list.list-panel-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* Le conteneur de liste est le seul scrollable dans le panel. */
  overflow-y: auto;
  overflow-x: hidden;
}
.list-panel-scroll--busy {
  /* Garde une zone visible sous l’overlay pendant le premier fetch */
  min-height: 5rem;
}
.list-panel-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg, #fff) 85%, transparent);
  font-size: 0.9rem;
}
[data-theme="dark"] .list-panel-loading-overlay {
  background: color-mix(in srgb, var(--bg, #1a1a1a) 88%, transparent);
}
/* Vue une seule section (À review / Actifs / Inactifs) : contenu qui défile avec le panel (sentinel visible au scroll) */
.persona-list-section {
  display: flex;
  flex-direction: column;
}
.persona-list-section .conv-section-header-persona-list {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.persona-list-section .conv-section-header-persona-list .conv-section-count {
  margin-left: auto;
}
.persona-list-scroll-wrap {
  flex: 0 0 auto;
}
.list-panel-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  visibility: hidden;
  overflow-anchor: none;
}
.list-panel-loading-more {
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  overflow-anchor: none;
}

/* Reservations / Avis voyageurs */
.reviews-layout {
  min-height: calc(100vh - 72px);
}

body.has-app-shell .reviews-layout {
  min-height: 0;
}
.reviews-sidebar .list-panel-toolbar {
  display: block;
}
.reviews-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.reviews-filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.reviews-filters-toggle {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0.1rem 0;
  cursor: pointer;
}
.reviews-filters-toggle:hover {
  color: var(--text);
}
.reviews-count-inline {
  font-size: 0.72rem;
}
.reviews-filters-panel {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.45rem;
  background: color-mix(in srgb, var(--panel) 88%, var(--bg));
}
.reviews-filters-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}
.reviews-filter-input.settings-input {
  font-size: 0.76rem;
  min-height: 30px;
  padding: 0.25rem 0.45rem;
}
.reviews-filters-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  margin-top: 0.3rem;
}
.review-item {
  /* Reuse conversation list item structure with light review-specific tweaks. */
  padding: 0.62rem 0.85rem;
}
.review-item-active {
  border-left-color: var(--accent);
}

/* Alignement visuel avec la liste Conversations : ligne sélectionnée bien visible */
.reviews-sidebar .conv-item.review-item.conv-item-active {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--accent);
  border-left-color: var(--accent);
}
.review-item-top {
  gap: 0.55rem;
}
.review-item-name {
  font-size: 0.83rem;
}
.review-item-meta {
  font-size: 0.76rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.reviews-item-platform-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.reviews-item-platform-icon svg {
  display: block;
}
.reviews-item-replied-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--success-bg);
  color: var(--success);
}
.review-tone-red {
  background: var(--danger-bg);
  color: var(--danger);
}
.review-tone-amber {
  background: var(--warning-bg);
  color: var(--warning);
}
.review-tone-green {
  background: var(--success-bg);
  color: var(--success);
}
.reviews-detail {
  overflow: auto;
}
.reviews-detail-content {
  padding: 0.95rem 1rem 1.2rem;
}
.reviews-detail-header.shell-page__header {
  margin-bottom: 0.55rem;
}
.reviews-detail-panel {
  margin-top: 0.7rem;
}

/* ≥769px : compacter l’en-tête détail (évite padding + marge + padding).
   Ne pas utiliser :not(.conv-mobile-chat) : ce nom est trompeur — la classe est posée dès qu’un
   avis est sélectionné (voir mobileShowDetail), y compris sur desktop large. */
@media (min-width: 769px) {
  .reviews-layout .reviews-detail-content {
    padding-top: 0.75rem;
  }
  .reviews-layout .reviews-detail-panel {
    margin-top: 0;
  }
  .reviews-layout .reviews-detail-head {
    padding-top: 0;
  }
}

.reviews-detail-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  /* Desktop : espace géré par .reviews-detail-content (voir media ci-dessus). */
  padding-top: 0.55rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--border);
}

.reviews-detail-head > .conv-mobile-back {
  align-self: flex-start;
}

.reviews-detail-head-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
}

.reviews-detail-head-primary {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.12rem;
}

.reviews-detail-head-aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
}

/**
 * Note détail : lisibilité > pastille liste (pas de gros bold sur fond teinté : contraste faible).
 * Fond neutre + bordure sémantique, texte coloré semi-gras.
 */
.reviews-detail-head-aside .reviews-score-pill {
  flex-shrink: 0;
  white-space: nowrap;
  font-size: 1.12rem;
  font-weight: 600;
  line-height: 1.28;
  padding: 0.26rem 0.52rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: none;
}

.reviews-detail-head-aside .reviews-score-pill.review-tone-red {
  color: var(--danger);
  border-color: var(--danger-border);
}

.reviews-detail-head-aside .reviews-score-pill.review-tone-amber {
  color: var(--warning);
  border-color: var(--warning-border);
}

.reviews-detail-head-aside .reviews-score-pill.review-tone-green {
  color: var(--success);
  border-color: var(--success-border);
}

.reviews-detail-head-actions-row {
  display: flex;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
}

.reviews-detail-head-actions-row .reviews-detail-actions {
  justify-content: flex-start;
}

.reviews-detail-mobile-nav {
  display: none;
}
.reviews-detail-identity {
  flex: 1;
  min-width: 0;
}
.reviews-detail-title {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}
.reviews-detail-meta {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
}

.reviews-detail-meta.reviews-detail-meta--header {
  margin: 0;
}
.reviews-detail-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
}
.reviews-meta-sep {
  opacity: 0.65;
  user-select: none;
}
.reviews-detail-platform-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.reviews-detail-platform-icon svg {
  display: block;
}
.reviews-detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-wrap: wrap;
  max-width: none;
}
.reviews-score-pill {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
}
.btn-reviews-airbnb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #ff5a5f;
  color: #fff !important;
  border: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-reviews-airbnb:hover {
  filter: brightness(0.96);
  color: #fff !important;
}
.btn-reviews-airbnb-icon {
  display: inline-flex;
  line-height: 0;
}
.btn-reviews-airbnb-icon svg path {
  fill: #fff !important;
}
.btn-reviews-booking {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #003b95;
  color: #fff !important;
  border: none;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-reviews-booking:hover {
  filter: brightness(1.06);
  color: #fff !important;
}
.btn-reviews-booking-icon {
  display: inline-flex;
  line-height: 0;
}
.btn-reviews-booking-icon svg path {
  fill: #fff !important;
}
.btn-reviews-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.btn-reviews-status-icon {
  font-size: 0.85rem;
  line-height: 1;
}
.reviews-detail-badges {
  margin-top: 0.7rem;
}
.reviews-detail-grid {
  margin-top: 0.8rem;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0.75rem;
}
.reviews-detail-stack {
  display: grid;
  gap: 0.75rem;
}
.reviews-block {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
.reviews-block-private-feedback {
  background: var(--bg-secondary);
  border-color: color-mix(in srgb, var(--border) 88%, var(--muted) 12%);
}
.reviews-block-host-reply {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface) 90%);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border) 72%);
}
.reviews-reply-prompt-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin-top: 0.15rem;
  min-height: 1.5rem;
}
.reviews-reply-prompt-btn {
  all: unset;
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.2rem 0.45rem 0.2rem 0.35rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.2;
}
.reviews-reply-prompt-btn:hover:not(:disabled) {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.reviews-reply-prompt-btn:disabled {
  cursor: default;
  opacity: 0.55;
}
.reviews-reply-prompt-btn svg {
  flex-shrink: 0;
  color: var(--muted);
}
.reviews-reply-prompt-btn:hover:not(:disabled) svg {
  color: var(--accent);
}
.reviews-reply-prompt-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}
.reviews-reply-prompt-row .reviews-reply-prompt-feedback {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}
.reviews-detail-section-title {
  margin-top: 0.8rem;
}
.reviews-block-title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.reviews-block-title-with-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.reviews-translate-toggle {
  font-size: 0.72rem;
  padding: 0.15rem 0.4rem;
  line-height: 1.2;
}
.reviews-subscores {
  display: grid;
  gap: 0.45rem;
}
.reviews-subscore-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
}
.reviews-detail-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.reviews-empty-subscores {
  margin-top: 0.5rem;
  font-size: 0.82rem;
}
.reviews-list-loading-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.reviews-list-loading-spinner {
  opacity: 0.9;
}

/* Bloc « nécessite une réponse » (détail avis) — même accent + icône étoile que « Générer une réponse IA » (conversations). */
.reviews-reply-need-callout {
  margin: 0.5rem 0 0.75rem;
  padding: 0.55rem 0.65rem;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.reviews-reply-need-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}
.reviews-reply-need-icon {
  flex-shrink: 0;
  /* Aligne l’étoile avec le corps du texte (cap height), pas le bord haut du paragraphe */
  margin-top: 0.32em;
  color: var(--accent);
}
.reviews-reply-need-column {
  flex: 1;
  min-width: 0;
}
.reviews-reply-need-text {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
}
.reviews-reply-need-label {
  color: var(--accent);
  font-weight: 600;
}
.reviews-reply-need-reason {
  color: var(--accent);
  font-weight: 500;
}
.reviews-reply-prompt-row--in-callout {
  margin-top: 0.4rem;
}
.reviews-reply-prompt-btn--in-callout {
  color: var(--accent);
  border-color: var(--accent);
  background: transparent;
  font-weight: 600;
}
.reviews-reply-prompt-btn--in-callout:hover:not(:disabled) {
  color: var(--accent-hover);
  border-color: var(--accent-hover);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow: 0 2px 10px var(--accent-shadow);
}
.reviews-reply-prompt-btn--in-callout svg {
  color: var(--accent);
}
.reviews-reply-prompt-btn--in-callout:hover:not(:disabled) svg {
  color: var(--accent-hover);
}
.reviews-reply-prompt-row--in-callout .reviews-reply-prompt-feedback {
  color: var(--muted);
}

/* Reviews list section headers (specific palette, not conversations). */
.reviews-section-needs-attention {
  background: var(--danger-bg);
  color: var(--danger);
}
.reviews-section-reply-possible {
  background: var(--warning-bg);
  color: var(--warning);
}
.reviews-section-others {
  background: var(--bg);
  color: var(--muted);
}
@media (max-width: 1320px) {
  .reviews-detail-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 980px) {
  .reviews-filters-row {
    grid-template-columns: 1fr;
  }
  .reviews-detail-grid {
    grid-template-columns: 1fr;
  }
  .reviews-detail-actions {
    max-width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .reviews-detail-content {
    padding: 0.7rem 0.7rem 1rem;
  }
}

/* Stats / analytics dashboard */
.stats-dash-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
}
.stats-dash-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px 14px;
  align-items: end;
}
.stats-dash-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 1.4rem;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.stats-card {
  padding: 12px 14px;
}
.stats-card-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
}
.stats-kpi-value {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
}
.stats-chart-box {
  width: 100%;
  height: 260px;
}
.stats-banner-warn {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--warning-bg, #fff8e6);
  color: var(--warning, #b45309);
  margin-bottom: 8px;
}
.stats-warnings {
  margin: 0 0 12px;
  padding-left: 1.2rem;
  font-size: 0.9rem;
}
@media (max-width: 900px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stats-card {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* =============================================================================
   Réservations — timeline calendrier multi-appartements
   ============================================================================= */
.res-tl-page {
  max-width: none !important;
  width: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  /* Palette timeline (adoucie, cohérente, peu agressive) */
  --res-tl-prop-band-bg: color-mix(in srgb, var(--bg-secondary) 72%, var(--surface));
  --res-tl-prop-band-bg-stripe: color-mix(in srgb, var(--bg-secondary) 66%, var(--surface));
  --res-tl-blocked-col-bg: color-mix(in srgb, var(--bg-secondary) 86%, var(--surface));
  /* Teinte « aujourd’hui » 100 % opaque (même rendu qu’un violet léger sur surface, sans couche alpha). */
  --res-tl-today-col-bg: color-mix(in srgb, #6366f1 14%, var(--surface));
  --res-tl-today-col-bg-on-blocked: color-mix(
    in srgb,
    #6366f1 18%,
    var(--res-tl-blocked-col-bg)
  );

  /* Couleurs canaux : encore plus lumineuses (+ blanc), tout en gardant du “corps”
     grâce à un stop B un peu plus dense (évite l’effet délavé). */
  --res-tl-ch-booking-a: color-mix(in srgb, #3b82f6 72%, #fff);
  --res-tl-ch-booking-b: color-mix(in srgb, #1d4ed8 78%, #fff);
  --res-tl-ch-airbnb-a: color-mix(in srgb, #ec4899 70%, #fff);
  --res-tl-ch-airbnb-b: color-mix(in srgb, #db2777 76%, #fff);
  --res-tl-ch-direct-a: color-mix(in srgb, #22c55e 70%, #fff);
  --res-tl-ch-direct-b: color-mix(in srgb, #059669 76%, #fff);
}

.res-tl-header .res-tl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

.res-tl-today-btn {
  font-weight: 700;
}

.res-tl-jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.res-tl-jump-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.res-tl-jump-label-text {
  white-space: nowrap;
}

.res-tl-date-input {
  width: auto;
  min-width: 10rem;
}

.res-tl-inq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  user-select: none;
}

.res-tl-inq-toggle .toggle-switch {
  width: 34px;
  height: 20px;
}

.res-tl-inq-toggle .toggle-slider::before {
  width: 14px;
  height: 14px;
  left: 3px;
  bottom: 3px;
}

.res-tl-inq-toggle .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(14px);
}

.res-tl-inq-label {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.res-tl-staff-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.res-tl-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.res-tl-frame {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.res-tl-vscroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

.res-tl-vscroll.res-tl--h-pan-grabbing {
  cursor: grabbing;
  user-select: none;
  touch-action: none;
  overscroll-behavior: contain;
}

/* --res-tl-day-w défini sur .res-tl-calendar-stack (template) */

.res-tl-calendar-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Remplit au moins la hauteur du scroll pour que .res-tl-vscroll-tail absorbe le vide sous les lignes */
  min-height: 100%;
}

.res-tl-vscroll-tail {
  flex: 1 1 auto;
  min-height: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}


/* En-tête mois/jours : reste visible au scroll vertical ; le scroll horizontal est dans .res-tl-h-scroller */
.res-tl-sticky-header-block {
  position: sticky;
  top: 0;
  z-index: 14;
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}

.res-tl-now-marker-head {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 0;
  margin-left: -6px; /* centre sur la barre */
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid rgba(220, 38, 38, 0.92);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 0 8px rgba(220, 38, 38, 0.25));
  pointer-events: none;
  z-index: 15; /* au-dessus de l’en-tête sticky */
  transform: translateZ(0);
}

.res-tl-now-marker {
  position: absolute;
  left: 0;
  width: 2px;
  margin-left: -1px; /* centre sur la frontière / milieu */
  background: rgba(220, 38, 38, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 18px rgba(220, 38, 38, 0.35);
  pointer-events: none;
  /* Au-dessus du bandeau (bordure) pour éviter la coupure d’1 px, mais sous la couche barres/pills. */
  z-index: 8;
  top: -1px;
  bottom: -1px;
  transform: translateZ(0);
}

@keyframes resTlNowPulseStart {
  0% { opacity: 0.65; filter: saturate(1.1); }
  50% { opacity: 1; filter: saturate(1.35); }
  100% { opacity: 0.72; filter: saturate(1.1); }
}

.res-tl-now-marker--start {
  animation: resTlNowPulseStart 1.6s ease-in-out infinite;
}

.res-tl-now-marker--mid,
.res-tl-now-marker--end {
  animation: none;
}

/* Drag horizontal : pas d'inertie visuelle ; couche compositor pour suivre le scroll sans frame de retard */
.res-tl-vscroll.res-tl--h-pan-grabbing .res-tl-now-marker,
.res-tl-vscroll.res-tl--h-pan-grabbing .res-tl-now-marker-head {
  transition: none;
  will-change: transform;
}

.res-tl-h-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  /* Par défaut on masque (pas de barre par ligne). */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.res-tl-h-scroller::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Sur le scroller d'en-tête (unique), afficher la scrollbar pour rendre explicite le scroll horizontal. */
.res-tl-sticky-header-block .res-tl-h-scroller {
  scrollbar-width: auto;
  -ms-overflow-style: auto;
}

.res-tl-sticky-header-block .res-tl-h-scroller::-webkit-scrollbar {
  display: block;
  height: 12px;
}

.res-tl-sticky-header-block .res-tl-h-scroller::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}

@media (max-width: 768px) {
  /* Mobile: masquer la scrollbar horizontale de l'en-tête (elle décale les lignes sous les dates). */
  .res-tl-sticky-header-block .res-tl-h-scroller {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .res-tl-sticky-header-block .res-tl-h-scroller::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Scroll horizontal uniquement sur l’en-tête ; les lignes suivent par translation (évite N scrollers). */
  .res-tl-sticky-header-block .res-tl-h-scroller {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }

  /* Couche compositor sur la piste : scroll + sync JS sur les autres lignes moins couplés au repaint global. */
  .res-tl-h-inner {
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}

.res-tl-h-inner {
  flex-shrink: 0;
}

/* Dans une ligne timeline, forcer la hauteur à remplir la ligne (évite “blanc” sous les prix). */
.res-tl-row .res-tl-h-inner {
  height: 100%;
}

.res-tl-row .res-tl-track {
  height: 100%;
}

.res-tl-row .res-tl-track-stack {
  height: 100%;
}

.res-tl-sticky-header {
  background: var(--surface);
}

.res-tl-months,
.res-tl-days {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.res-tl-months {
  position: relative;
}

.res-tl-month-dock-wrap {
  flex: 0 0 auto;
  /* Largeur min = variable (alignement piste) ; width max-content évite un second style inline recalculé à chaque frame Aurelia */
  width: max-content;
  min-width: var(--res-tl-month-dock-w, 0px);
  max-width: min(42vw, 14rem);
  overflow: visible;
  position: sticky;
  left: 0;
  z-index: 5;
  box-sizing: border-box;
}

.res-tl-month-dock {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  /* Même retrait gauche que .res-tl-prop-band-label (0.65rem) — la largeur JS du dock inclut ce padding pour compenser la piste mois */
  padding: 0.35rem 0.35rem 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--muted);
  background: var(--surface);
  box-shadow: 10px 0 14px -14px rgba(15, 23, 42, 0.24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  will-change: transform;
}

.res-tl-months-track,
.res-tl-days-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.res-tl-months-track {
  padding-left: 0;
  /* Largeur dock = contenu ; compensée par variable (mise à jour JS après mesure). */
  margin-left: calc(-1 * var(--res-tl-month-dock-w, 0px));
}

/* Fenêtre de jours (spacers + slice) : alignée sur l’unique scroll maître */
.res-tl-days-track--windowed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 2.5rem;
  flex-shrink: 0;
}

.res-tl-day-spacer,
.res-tl-col-spacer,
.res-tl-cell-spacer {
  flex-shrink: 0;
}

/* virtual-repeat horizontal (@aurelia/ui-virtualization) : buffers + vues en ligne */
.res-tl-days-track--hvirt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  min-height: 2.5rem;
}

/* Tampons virtual-repeat : largeur inline, ne pas rétrécir en flex */
.res-tl-days-track--hvirt > div,
.res-tl-column-grid--hvirt > div,
.res-tl-cells--hvirt > div {
  flex-shrink: 0;
}

.res-tl-day-head--hvirt {
  flex: 0 0 var(--res-tl-day-w, 56px);
  width: var(--res-tl-day-w, 56px);
  min-width: var(--res-tl-day-w, 56px);
  max-width: var(--res-tl-day-w, 56px);
}

.res-tl-month-cell {
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: capitalize;
  color: var(--muted);
  /* Même retrait que .res-tl-month-dock : texte calé pareil sur la grille / au dock */
  padding: 0.35rem 0.35rem 0.35rem 0.65rem;
  border-right: 1px solid var(--border);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.res-tl-day-head {
  /* Largeur = une colonne jour : identique aux cellules prix / aux barres (--res-tl-day-w) */
  flex: 0 0 var(--res-tl-day-w, 56px);
  width: var(--res-tl-day-w, 56px);
  min-width: var(--res-tl-day-w, 56px);
  max-width: var(--res-tl-day-w, 56px);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.35rem 0.1rem;
  font-size: 0.65rem;
  color: var(--muted);
  border-right: 1px solid var(--border);
}

.res-tl-day-head--today {
  color: var(--accent);
  font-weight: 700;
  background: var(--gradient-primary-subtle);
}

.res-tl-day-letter {
  text-transform: capitalize;
}

.res-tl-day-num {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
}

.res-tl-rows-host {
  position: relative;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: pan-y;
  overscroll-behavior-x: contain;
}

/* La barre "now" est un overlay : éviter qu'une bordure de .res-tl-row la coupe visuellement */
 

.res-tl-row {
  position: absolute;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
  background: var(--surface);
  overflow: visible;
  isolation: isolate;
  cursor: default;
  contain: layout style;
  /* Dock libellé : défini sur `.res-tl-calendar-stack` pour éviter un frame à 0 après rebuild des lignes. */
  --tl-prop-band-dock: inherit;
}

/* Bandeau : piste pastilles pleine largeur (alignée sur le calendrier) ; libellé en overlay gauche */
.res-tl-prop-band {
  flex: 0 0 auto;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Caler la piste pastilles en bas : l’espace « titre » est au-dessus, pas une boîte strip-host étirée. */
  justify-content: flex-end;
  /* 2 lignes de titre au-dessus de la rangée pastilles (~18px) — ROW_PROP_BAND_PX côté layout. */
  min-height: 2.25rem;
  background: var(--res-tl-prop-band-bg);
  /* Pas de bordure basse ici : la ligne du tableau prix doit coller visuellement (séparation inter-lignes = .res-tl-row). */
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  cursor: grab;
}

/*
 * Conteneur transparent + pointer-events ciblés : à droite du nom, la piste (pastilles) reste
 * visible et « grabbable » — effet « ça continue derrière » sans pseudo ni JS.
 */
.res-tl-prop-band-label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  box-sizing: border-box;
  width: min(58%, 26rem);
  max-width: min(58%, 26rem);
  min-width: 0;
  padding: 0.06rem 0.35rem 0.32rem 0.65rem;
  display: flex;
  align-items: flex-end;
  background: transparent;
  pointer-events: none;
}

.res-tl-prop-band-text {
  pointer-events: auto;
  max-width: 100%;
  width: fit-content;
  box-sizing: border-box;
  padding: 0.12rem 0.45rem 0.14rem 0.42rem;
  border-radius: 6px;
  background: var(--res-tl-prop-band-bg);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--text);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
  word-break: break-word;
  min-width: 0;
}

/* Même largeur de piste que l’en-tête : translation JS via `.res-tl-h-inner` — hauteur = seule la bande pastilles. */
.res-tl-prop-band-strip-host {
  position: relative;
  width: 100%;
  flex: 0 0 var(--res-tl-override-band, 18px);
  height: var(--res-tl-override-band, 18px);
  min-height: var(--res-tl-override-band, 18px);
  max-height: var(--res-tl-override-band, 18px);
  overflow: hidden;
  box-sizing: border-box;
}

.res-tl-prop-band-strip-host .res-tl-h-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
}

/*
 * Masque la partie des pastilles sous le nom : `dock + scroll` en calc direct (héritage fiable depuis
 * `.res-tl-row` + `.res-tl-calendar-stack`), sans variable intermédiaire sur la ligne.
 */
.res-tl-prop-band-strip-layer {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: var(--res-tl-override-band, 18px);
  pointer-events: none;
  /* Limite les repaints au bandeau ; couche compositor pour le clip animé au scroll H. */
  contain: paint;
  transform: translateZ(0);
  clip-path: inset(
    0 0 0 calc(var(--tl-prop-band-dock, 0px) + var(--res-tl-strip-scroll, 0px))
  );
}

.res-tl-prop-band-strip-layer .res-tl-override-strip {
  --tl-pill-left: 0px;
  --tl-strip-pad: max(
    0px,
    calc(var(--tl-prop-band-dock, 0px) + var(--res-tl-strip-scroll, 0px) - var(--tl-pill-left, 0px))
  );
  padding: 3px 6px 3px calc(6px + var(--tl-strip-pad));
  pointer-events: auto;
}

/* Ascenseur horizontal principal d’une ligne (sous le titre), pas le mini-suiveur du bandeau overrides */
.res-tl-row > .res-tl-h-scroller {
  flex: 1 1 auto;
  min-height: 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

/* Une seule source de scroll horizontal (en-tête) : les lignes suivent par translation JS. */
.res-tl-h-scroller--row-follower {
  overflow-x: hidden;
  overflow-y: hidden;
  touch-action: pan-y;
}

.res-tl-row--stripe .res-tl-prop-band {
  background: var(--res-tl-prop-band-bg-stripe);
}

.res-tl-row--stripe .res-tl-prop-band-text {
  background: var(--res-tl-prop-band-bg-stripe);
}

.res-tl-row--stripe > .res-tl-h-scroller {
  background: color-mix(in srgb, var(--surface) 88%, var(--bg-secondary));
}

.res-tl-track {
  position: relative;
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  min-width: 0;
}

/* Colonnes jour pleine hauteur (barres + prix) : quadrillage continu + fond « aujourd’hui » */
.res-tl-track-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--surface);
}

/* Une seule répétition par jour : fond + cellule prix en colonne ; barres et traits en overlay. */
.res-tl-main-columns--windowed {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  touch-action: pan-y;
}

.res-tl-main-days {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  touch-action: pan-y;
}

.res-tl-main-days > .res-tl-col-spacer,
.res-tl-main-days > .res-tl-day-brick {
  flex-shrink: 0;
}

.res-tl-day-brick {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  min-height: 0;
  box-sizing: border-box;
  touch-action: pan-y;
}

/* Timeline staff (sans prix) : pas de cellule prix — le fond calendaire suit quand même la hauteur de ligne. */
.res-tl-day-brick--no-price-cell {
  min-height: 100%;
}

/* Fond sur toute la hauteur de la colonne (y compris sous le prix), comme l’ancienne grille absolue. */
.res-tl-day-brick > .res-tl-col-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  flex: none;
  pointer-events: none;
  z-index: 0;
}

.res-tl-day-brick .res-tl-col-bg--hvirt {
  min-height: 0;
  min-width: 0;
  max-width: none;
}

.res-tl-main-columns--windowed > .res-tl-bars-layer {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}

.res-tl-day-brick > .res-tl-cell {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: auto;
  box-sizing: border-box;
}

.res-tl-column-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-auto-rows: 1fr;
  pointer-events: none;
  width: 100%;
  height: 100%;
}

.res-tl-column-grid--windowed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
}

.res-tl-column-grid--hvirt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.res-tl-col-bg--hvirt {
  flex: 0 0 var(--res-tl-day-w, 56px);
  width: var(--res-tl-day-w, 56px);
  min-width: var(--res-tl-day-w, 56px);
  max-width: var(--res-tl-day-w, 56px);
  min-height: 100%;
}

.res-tl-col-bg {
  box-sizing: border-box;
  min-height: 100%;
  border-right: none;
}

.res-tl-col-bg--today {
  background: var(--res-tl-today-col-bg);
}

/* Même principe que « aujourd’hui » : fond colonne derrière barres + pills (les cellules prix restent transparentes). */
.res-tl-col-bg--blocked {
  background: var(--res-tl-blocked-col-bg);
}

.res-tl-col-bg--today.res-tl-col-bg--blocked {
  background: var(--res-tl-today-col-bg-on-blocked);
}

.res-tl-col-bg--override.res-tl-col-bg--override-blackout {
  background: color-mix(in srgb, #111827 78%, var(--surface));
}

.res-tl-col-bg--override.res-tl-col-bg--override-warn {
  background: color-mix(in srgb, #7c2d12 35%, var(--surface));
}

.res-tl-col-bg--override.res-tl-col-bg--override-info {
  background: color-mix(in srgb, #1d4ed8 24%, var(--surface));
}

/* Traits verticaux continus (barres + prix), au-dessus du fond colonnes, sous les pills */
.res-tl-vlines-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to right,
    transparent 0,
    transparent calc(var(--res-tl-day-w, 56px) - 1px),
    color-mix(in srgb, var(--border) 90%, transparent) calc(var(--res-tl-day-w, 56px) - 1px),
    color-mix(in srgb, var(--border) 90%, transparent) var(--res-tl-day-w, 56px)
  );
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.res-tl-bars-layer {
  position: relative;
  z-index: 9;
  flex-shrink: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.res-tl-override-strip {
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 20;
  min-height: calc(var(--res-tl-override-band, 18px) - 4px);
  max-height: calc(var(--res-tl-override-band, 18px) - 2px);
  border-radius: 6px;
  border: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 3px 6px;
  box-sizing: border-box;
  overflow: hidden;
  margin: 0;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.res-tl-override-strip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent, #2563eb) 85%, transparent);
  outline-offset: 1px;
}

.res-tl-override-strip__label {
  font-size: 0.58rem;
  line-height: 1.2;
  white-space: normal;
  word-break: break-word;
  hyphens: auto;
  text-align: left;
  text-transform: none;
  letter-spacing: 0.01em;
  font-weight: 700;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  -webkit-box-pack: start;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.res-tl-override-popover {
  position: fixed;
  z-index: 4000;
  transform: translateX(-50%);
  max-width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.5rem 0.65rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: var(--surface, #fff);
  color: var(--text);
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
}

.res-tl-override-popover__text {
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  display: block;
  text-align: center;
}

.res-tl-override-strip--blackout {
  background: color-mix(in srgb, #111827 80%, var(--surface));
  color: #e5e7eb;
}

.res-tl-override-strip--warn {
  background: color-mix(in srgb, #b45309 72%, var(--surface));
  color: #fff7ed;
}

.res-tl-override-strip--info {
  background: color-mix(in srgb, #1d4ed8 72%, var(--surface));
  color: #eff6ff;
}

/* Indique « plus de demandes en scroll vertical » sans dégrader sur les réservations confirmées. */
.res-tl-inq-scroll-hint {
  position: absolute;
  z-index: 20;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  min-height: 22px;
  padding: 2px 5px 2px 4px;
  border-radius: 6px;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface) 82%, var(--bg-secondary));
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transform: translateY(-50%);
  line-height: 1;
  isolation: isolate;
}

.res-tl-inq-scroll-hint__chev {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.res-tl-inq-scroll-hint__n {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text);
  min-width: 0.65rem;
  text-align: center;
}

.res-tl-bar {
  position: absolute;
  z-index: 10;
  margin: 0;
  padding: 0 0.4rem;
  border: none;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 20px;
  height: 20px;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Confirmées : couleur selon canal (Beds24 apiSource / apiSourceId) */
.res-tl-bar--confirmed {
  color: #fff;
}

.res-tl-bar--confirmed.res-tl-bar--ch-booking {
  background: linear-gradient(135deg, var(--res-tl-ch-booking-a), var(--res-tl-ch-booking-b));
}

.res-tl-bar--confirmed.res-tl-bar--ch-airbnb {
  background: linear-gradient(135deg, var(--res-tl-ch-airbnb-a), var(--res-tl-ch-airbnb-b));
}

.res-tl-bar--confirmed.res-tl-bar--ch-direct {
  background: linear-gradient(135deg, var(--res-tl-ch-direct-a), var(--res-tl-ch-direct-b));
}

.res-tl-bar--inquiry {
  background: color-mix(in srgb, var(--bg-secondary) 82%, var(--surface));
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.res-tl-bar--cancelled {
  background: color-mix(in srgb, var(--bg-secondary) 88%, var(--surface));
  color: var(--text-secondary);
  border: 2px solid var(--border);
  text-decoration: line-through;
}

.res-tl-bar--cancelled.res-tl-bar--ch-booking {
  border-color: var(--res-tl-ch-booking-a);
}

.res-tl-bar--cancelled.res-tl-bar--ch-airbnb {
  border-color: var(--res-tl-ch-airbnb-a);
}

.res-tl-bar--cancelled.res-tl-bar--ch-direct {
  border-color: var(--res-tl-ch-direct-a);
}

/* Séjour actif : garde le dégradé canal + halo clair */
.res-tl-bar--ongoing {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.res-tl-bar--readonly {
  cursor: default;
  pointer-events: none;
}

.res-tl-cells {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.res-tl-cells--windowed {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.res-tl-cells--hvirt {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.res-tl-cell--hvirt {
  flex: 0 0 var(--res-tl-day-w, 56px);
  width: var(--res-tl-day-w, 56px);
  min-width: var(--res-tl-day-w, 56px);
  max-width: var(--res-tl-day-w, 56px);
}

.res-tl-cell {
  /* Même largeur fixe que .res-tl-day-head : bordures verticales = .res-tl-col-bg */
  flex: 0 0 var(--res-tl-day-w, 56px);
  width: var(--res-tl-day-w, 56px);
  min-width: var(--res-tl-day-w, 56px);
  max-width: var(--res-tl-day-w, 56px);
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: none;
  background: transparent;
  font-size: 0.7rem;
}

.res-tl-cell--override {
  justify-content: flex-start;
  align-items: center;
  padding-inline: 0.2rem;
  gap: 0.2rem;
}

.res-tl-override-chip {
  display: inline-block;
  padding: 0.05rem 0.22rem;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  max-width: calc(var(--res-tl-day-w, 56px) - 0.8rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.res-tl-override-chip--blackout {
  background: rgba(17, 24, 39, 0.92);
  color: #e5e7eb;
}

.res-tl-override-chip--warn {
  background: color-mix(in srgb, #92400e 76%, var(--surface));
  color: #fff7ed;
}

.res-tl-override-chip--info {
  background: color-mix(in srgb, #1d4ed8 68%, var(--surface));
  color: #eff6ff;
}

.res-tl-price {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
}

.res-tl-cell--blocked {
  background: transparent;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}

.res-tl-price--struck {
  text-decoration: line-through;
  opacity: 0.75;
}

.res-tl-price--hidden {
  display: none;
}

/* Prix du jour (colonne bleutée) : plus lisible sans surcharger */
.res-tl-cell--today .res-tl-price:not(.res-tl-price--struck) {
  font-weight: 700;
}

.res-tl-hbar-wrap {
  flex-shrink: 0;
  padding: 0.25rem 0.5rem 0.4rem;
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}

.res-tl-hbar-label {
  display: none;
}

.res-tl-hbar {
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 14px;
  scrollbar-width: auto;
}

.res-tl-hbar::-webkit-scrollbar {
  height: 12px;
}

.res-tl-hbar::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}

@media (max-width: 768px) {
  .res-tl-header.shell-page__header--split {
    flex-direction: column;
    align-items: stretch;
  }

  .res-tl-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: auto;
    align-items: center;
    gap: 0.5rem 0.6rem;
  }

  .res-tl-jump {
    justify-content: flex-end;
  }

  .res-tl-jump-label {
    font-size: 0.78rem;
  }

  .res-tl-jump-label-text {
    display: none;
  }

  .res-tl-date-input {
    min-width: 8.2rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
  }

  .res-tl-inq-toggle {
    grid-column: 1 / -1;
    justify-content: flex-end;
    font-size: 0.78rem;
    gap: 0.45rem;
  }

  .res-tl-inq-toggle .toggle-switch {
    width: 34px;
    height: 20px;
  }

  .res-tl-inq-toggle .toggle-slider::before {
    width: 14px;
    height: 14px;
    left: 3px;
    bottom: 3px;
  }

  .res-tl-inq-toggle .toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(14px);
  }
}

/* ── Bookings V1 (#/reservations/voyageurs) — padding horizontal : main.app-main uniquement (comme finance-tx-page) ── */
.bookings-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
}

.bookings-page .bookings-layout {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  min-width: 0;
  min-height: min(75vh, 900px);
  flex: 1 1 auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  align-items: stretch;
}

body.has-app-shell .bookings-page .bookings-layout {
  min-height: 0;
  flex: 1;
  height: auto;
  max-height: none;
}

.bookings-page .bookings-layout.reviews-layout .reviews-detail-panel {
  margin-top: 0;
}

/* Desktop large ≥1300px : split 300px + fiche */
@media (min-width: 1300px) {
  .bookings-page .bookings-layout {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .bookings-page .bookings-layout .bk-sidebar {
    grid-column: 1;
  }
  .bookings-page .bookings-layout .bk-detail-panel {
    grid-column: 2;
    min-width: 0;
    border-left: 1px solid var(--border);
    background: var(--surface);
  }
  /* Conserver le split même quand mobileShowDetail est vrai (classe héritée conv-mobile-chat) */
  .bookings-page .bookings-layout.conv-mobile-chat .bk-sidebar {
    display: flex !important;
  }
  .bookings-page .bookings-layout.conv-mobile-chat .bk-detail-panel {
    display: flex !important;
    grid-column: 2;
    border-left: 1px solid var(--border);
    background: var(--surface);
  }
}

.bookings-page .bk-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  width: auto;
  max-width: none;
  flex: initial;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.bookings-page .bk-results-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bookings-page .bk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}
.bookings-page .bk-search {
  flex: 1;
  min-width: 12rem;
}
.bookings-page .bk-filter-toggle {
  flex-shrink: 0;
}
.bookings-page .bk-quick-filters {
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}
.bookings-page .bk-check {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.bookings-page .bk-advanced {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}
.bookings-page .bk-date-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
}
.bookings-page .bk-list-compact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.bookings-page .bk-row-compact {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}
.bookings-page .bk-row-compact:hover {
  background: var(--surface-hover);
}
.bookings-page .bk-row-compact--active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.bookings-page .bk-row-compact__line1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.86rem;
  min-width: 0;
}
.bookings-page .bk-row-compact__guest {
  font-weight: 600;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookings-page .bk-row-compact__status {
  flex-shrink: 0;
  font-size: 0.68rem;
  color: var(--warning);
  border: 1px solid var(--warning-border);
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border-radius: 999px;
  padding: 0.04rem 0.34rem;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.bookings-page .bk-row-compact__line2 {
  font-size: 0.78rem;
  line-height: 1.35;
  word-break: break-word;
}
.bookings-page .bk-row-compact__line3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.bookings-page .bk-row-compact__channel {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  flex-shrink: 0;
}
.bookings-page .bk-row-compact__channel svg {
  display: block;
}
.bookings-page .bk-row-compact__ref {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.bookings-page .bk-mono {
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}
.bookings-page .bk-small {
  display: block;
  font-size: 0.72rem;
}
.bookings-page .bk-nowrap {
  white-space: nowrap;
}
.bookings-page .bk-badge-num {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  text-align: center;
  font-size: 0.75rem;
}
.bookings-page .bk-anomaly {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--warning) 18%, transparent);
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
}
.bookings-page .bk-load-more {
  margin-top: 0.75rem;
  text-align: center;
}
.bookings-page .bk-detail-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
/* Hôte personnalisé + racine interne : chaîne flex (sinon hauteur 0 → panneau blanc hors shell calendrier). */
.bookings-page .bk-detail-panel > booking-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  align-self: stretch;
}
.bookings-page .bk-detail-panel > booking-detail-body > .booking-detail-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.bookings-page .bk-detail-toolbar {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
@media (max-width: 1299px) {
  .bookings-page .bk-detail-toolbar {
    position: sticky;
    top: 0;
    z-index: 6;
    padding: 0.5rem 0.85rem;
  }
}
@media (min-width: 1300px) {
  .bookings-page .bk-detail-toolbar {
    padding-left: 1.15rem;
    padding-right: 1.15rem;
  }
}
.bookings-page .bk-detail-back {
  width: auto;
}
.bookings-page .bk-detail-body {
  position: relative;
  min-width: 0;
}
.bookings-page .bk-detail-hero {
  margin-bottom: 0.25rem;
}
.bookings-page .bk-detail-channel {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.bookings-page .bk-detail-meta {
  margin: 0.12rem 0 0;
  font-size: 0.84rem;
  line-height: 1.35;
}
.bookings-page .bk-detail-anomaly-hero {
  margin: 0.2rem 0 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--danger, #ef4444) 55%, var(--text));
}
.bookings-page .bk-detail-dates {
  margin: 0.35rem 0 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
}
.bookings-page .bk-detail-stats {
  margin: 0.18rem 0 0;
  font-size: 0.84rem;
}
.bookings-page .bk-check-times-busy {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1.5rem;
  text-align: center;
  font-size: 0.88rem;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: blur(2px);
}
.bookings-page .bk-check-times-busy .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.bookings-page .bk-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}
.bookings-page .bk-check-times {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0;
  flex: 0 0 auto;
}
.bookings-page .bk-check-times__field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.bookings-page .bk-check-times__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 650;
  white-space: nowrap;
}
.bookings-page .bk-check-times__select {
  width: 4.85rem;
  min-width: 4.85rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}
.bookings-page .bk-traveler-mood {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  font-size: 1.05rem;
  line-height: 1;
  margin-right: 0.15rem;
}
.bookings-page .bk-traveler-mood--calm {
  opacity: 0.72;
  font-size: 0.88rem;
}
.bookings-page .bk-traveler-mood--alert {
  font-size: 1.25rem;
  filter: contrast(1.08);
}
.bookings-page .bk-access-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  margin: 0.45rem 0 0;
  padding: 0.4rem 0.55rem;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, var(--accent, #6366f1) 22%);
  background: color-mix(in srgb, var(--surface) 92%, var(--accent, #6366f1) 8%);
}
.bookings-page .bk-access-block__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.bookings-page .bk-access-block__code {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.35rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 70%, var(--border) 30%);
}
.bookings-page .bk-access-block__copy {
  margin-left: auto;
}
.bookings-page .bk-detail-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  margin-top: 0.5rem;
}
.bookings-page .bk-detail-hero-actions .bk-detail-actions {
  margin: 0;
  flex: 1 1 auto;
  justify-content: flex-start;
}
.bookings-page .bk-access-block--hero {
  margin: 0;
  flex: 0 1 auto;
  padding: 0.28rem 0.45rem;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface) 96%, var(--border) 4%);
  box-shadow: none;
}

.bookings-page .bk-operational-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.45rem 0 0.15rem;
}
.bookings-page .bk-op-alert {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.bookings-page .bk-op-alert--info {
  border-color: color-mix(in srgb, var(--accent, #6366f1) 28%, var(--border));
  background: color-mix(in srgb, var(--accent, #6366f1) 8%, var(--surface));
}
.bookings-page .bk-op-alert--warn {
  border-color: color-mix(in srgb, var(--warning, #f59e0b) 40%, var(--border));
  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, var(--surface));
}
.bookings-page .bk-op-alert--danger {
  border-color: color-mix(in srgb, var(--danger, #ef4444) 45%, var(--border));
  background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--surface));
}
.bookings-page .bk-detail-main-grid--single {
  grid-template-columns: 1fr;
}
.bookings-page .bk-hero-badges {
  margin-top: 0.35rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.bookings-page .bk-card {
  margin: 0.45rem 0;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 10px;
  padding: 0.42rem 0.55rem 0.48rem;
  background: var(--surface);
  box-shadow: none;
}
.bookings-page .bk-card--finance {
  font-size: 0.88rem;
  opacity: 0.96;
}
.bookings-page .bk-finance-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  align-items: stretch;
}
.bookings-page .bk-finance-split__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/** Pousse les tableaux « Total » en bas de colonne tout en gardant titres + lignes en haut. */
.bookings-page .bk-finance-split__footer-spacer {
  flex: 1 1 auto;
  min-height: 0;
}
.bookings-page .bk-finance-table--body th,
.bookings-page .bk-finance-table--body td {
  vertical-align: top;
}
.bookings-page .bk-finance-split__title {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.bookings-page .bk-finance-alloc-meta {
  margin-top: 0.12rem;
  font-size: 0.72rem;
  line-height: 1.2;
}
.bookings-page .bk-finance-tx-link {
  color: color-mix(in srgb, var(--accent, #6366f1) 88%, var(--text));
  text-decoration: none;
}
.bookings-page .bk-finance-tx-link:hover {
  text-decoration: underline;
}

.bookings-page .bk-warn-banner {
  margin: 0.35rem 0 0.55rem;
  border: 1px solid color-mix(in srgb, var(--danger, #ef4444) 35%, var(--border));
  background: color-mix(in srgb, var(--danger, #ef4444) 10%, var(--surface));
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
}
.bookings-page .bk-warn-banner__title {
  font-weight: 800;
  font-size: 0.86rem;
  margin: 0 0 0.25rem;
}
.bookings-page .bk-warn-banner__list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.82rem;
  line-height: 1.35;
}
.bookings-page .bk-warn-banner__hint {
  font-size: 0.82rem;
}

@media (max-width: 900px) {
  .bookings-page .bk-finance-split {
    grid-template-columns: 1fr;
  }
  .bookings-page .bk-finance-split__footer-spacer {
    display: none;
  }
}
.bookings-page .bk-card--timeline {
  margin-top: 0.65rem;
  padding-bottom: 0.5rem;
}
.bookings-page .bk-card__label {
  margin: 0 0 0.4rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--muted);
  font-weight: 700;
}
.bookings-page .bk-msg-status {
  margin: 0 0 0.38rem;
}
.bookings-page .bk-msg-preview {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.42;
  color: var(--text);
  font-weight: 500;
}
.bookings-page .bk-msg-empty {
  margin: 0;
  font-size: 0.86rem;
}
.bookings-page .bk-finance-line {
  margin: 0.22rem 0 0;
  font-size: 0.86rem;
}
.bookings-page .bk-finance-line:first-of-type {
  margin-top: 0;
}
.bookings-page .bk-finance-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.bookings-page .bk-finance-table th,
.bookings-page .bk-finance-table td {
  padding: 0.14rem 0;
  border-bottom: none;
}
.bookings-page .bk-finance-table--body tr + tr th,
.bookings-page .bk-finance-table--body tr + tr td {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.bookings-page .bk-finance-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
}
.bookings-page .bk-finance-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bookings-page .bk-finance-table__net th,
.bookings-page .bk-finance-table__net td {
  border-bottom: none;
  border-top: 2px solid color-mix(in srgb, var(--text) 28%, var(--border));
  padding-top: 0.48rem;
  font-size: 0.95rem;
  font-weight: 800;
  background: color-mix(in srgb, var(--surface) 88%, var(--text) 4%);
}
.bookings-page .bk-finance-total--match th,
.bookings-page .bk-finance-total--match td {
  color: var(--success);
}
.bookings-page .bk-finance-total--mismatch th,
.bookings-page .bk-finance-total--mismatch td {
  color: var(--danger);
}
.bookings-page .bk-card--finance .bk-finance-table__net th,
.bookings-page .bk-card--finance .bk-finance-table__net td {
  font-size: 0.82rem;
  font-weight: 500;
  padding-top: 0.32rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  background: transparent;
}
.bookings-page .bk-card--finance .bk-finance-table__net td {
  font-weight: 600;
}



/* Fil opérateur (projection conversation V3.1) */
.bookings-page .bk-card--operator-feed {
  margin-top: 0.35rem;
  border-color: color-mix(in srgb, var(--border) 78%, transparent);
}
.bookings-page .bk-op-summary {
  margin: 0 0 0.5rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text);
}
.bookings-page .bk-op-summary--lead {
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
  max-width: 52rem;
}
.bookings-page .bk-op-banners {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}
.bookings-page .bk-op-banner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  border: 1px solid var(--border);
}
.bookings-page .bk-op-banner--info {
  background: var(--surface);
}
.bookings-page .bk-op-banner--warning {
  background: rgba(234, 179, 8, 0.12);
  border-color: rgba(234, 179, 8, 0.45);
}
.bookings-page .bk-op-banner--critical {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.35);
}
.bookings-page .bk-op-banner__text {
  flex: 1;
  min-width: 0;
}
.bookings-page .bk-op-banner__dismiss {
  flex-shrink: 0;
  padding: 0 0.35rem !important;
  font-size: 0.68rem !important;
}
.bookings-page .bk-op-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.55rem;
}
.bookings-page .bk-op-nav__link {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.72rem;
  color: var(--link, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  opacity: 0.9;
}
.bookings-page .bk-op-nav__link:hover {
  opacity: 1;
}
/* Fil opérateur : axe central + feed type activité (V3.1) */
.bookings-page .bk-op-tl {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0.15rem;
}
.bookings-page .bk-op-tl::before {
  content: '';
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--border);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}
.bookings-page .bk-op-tl__phase {
  position: relative;
  z-index: 1;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0 0.4rem;
  padding: 0 0 0.15rem;
  grid-column: unset;
}
.bookings-page .bk-op-tl__phase-ic {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0.72;
}
.bookings-page .bk-op-tl__phase-label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  opacity: 0.72;
}
.bookings-page .bk-op-tl__phase--prep .bk-op-tl__phase-label {
  opacity: 0.78;
}
.bookings-page .bk-op-tl__phase--stay .bk-op-tl__phase-label {
  opacity: 0.82;
}
.bookings-page .bk-op-tl__phase--depart .bk-op-tl__phase-label {
  opacity: 0.78;
}
.bookings-page .bk-op-tl__day {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin: 0.55rem 0 0.4rem;
  padding: 0;
}
.bookings-page .bk-op-tl__day-line {
  height: 1px;
  background: var(--border);
  opacity: 0.4;
}
.bookings-page .bk-op-tl__day-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.1rem 0.35rem;
  background: var(--bg);
  border-radius: 3px;
}
.bookings-page .bk-op-tl__gap {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0.08rem 0 0.22rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bookings-page .bk-op-tl__gap-label {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.55;
  padding: 0.05rem 0.4rem;
  background: transparent;
  position: relative;
  z-index: 2;
}
.bookings-page .bk-op-tl__event--guest + .bookings-page .bk-op-tl__event--guest {
  margin-top: 0.38rem;
}
.bookings-page .bk-op-tl__event {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.75rem minmax(0, 1fr);
  gap: 0 0.4rem;
  align-items: center;
  margin: 0 0 0.16rem;
  padding: 0;
}
.bookings-page .bk-op-tl__milestone {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0.12rem 0 0.2rem;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bookings-page .bk-op-tl__milestone-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, var(--muted) 6%);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  box-shadow: none;
  position: relative;
  z-index: 2;
}
.bookings-page .bk-op-tl__milestone-icon {
  font-size: 0.78rem;
  opacity: 0.85;
  line-height: 1;
}
.bookings-page .bk-op-tl__milestone-text {
  font-variant-numeric: tabular-nums;
}
.bookings-page .bk-op-tl__lane {
  min-width: 0;
}
.bookings-page .bk-op-tl__rail {
  display: flex;
  justify-content: center;
  align-self: center;
  padding-top: 0;
  position: relative;
  z-index: 2;
}
.bookings-page .bk-op-tl__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.5;
  flex-shrink: 0;
}
.bookings-page .bk-op-tl__card {
  max-width: 100%;
  margin: 0;
  padding: 0.32rem 0.42rem 0.34rem;
  border: 1px solid color-mix(in srgb, var(--border) 42%, transparent);
  border-radius: 6px;
  border-left: 2px solid color-mix(in srgb, var(--border) 55%, transparent);
  background: color-mix(in srgb, var(--surface) 99%, transparent);
  cursor: default;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
  box-shadow: none;
}
.bookings-page .bk-op-tl__card:hover {
  background: color-mix(in srgb, var(--surface) 100%, var(--muted) 2%);
}
[data-theme='dark'] .bookings-page .bk-op-tl__card:hover {
  background: color-mix(in srgb, var(--surface) 100%, #fff 3%);
}
.bookings-page .bk-op-tl__kind--ask {
  border-left-color: rgba(59, 130, 246, 0.5);
  background: color-mix(in srgb, var(--surface) 98%, rgba(59, 130, 246, 0.05));
}
.bookings-page .bk-op-tl__kind--problem {
  border-left-color: rgba(234, 88, 12, 0.55);
  background: color-mix(in srgb, var(--surface) 98%, rgba(234, 88, 12, 0.05));
}
.bookings-page .bk-op-tl__kind--resolve {
  border-left-color: rgba(22, 163, 74, 0.48);
  background: color-mix(in srgb, var(--surface) 98%, rgba(22, 163, 74, 0.05));
}
.bookings-page .bk-op-tl__kind--inform {
  border-left-color: color-mix(in srgb, var(--border) 55%, var(--muted) 45%);
  background: color-mix(in srgb, var(--surface) 99%, var(--muted) 2%);
}
.bookings-page .bk-op-tl__kind--promise {
  border-left-color: rgba(124, 58, 237, 0.42);
  background: color-mix(in srgb, var(--surface) 98%, rgba(124, 58, 237, 0.04));
}
.bookings-page .bk-op-tl__kind--state_change {
  border-left-color: rgba(100, 116, 139, 0.55);
  background: color-mix(in srgb, var(--surface) 98%, rgba(100, 116, 139, 0.04));
}
.bookings-page .bk-op-tl__kind--other {
  border-left-color: color-mix(in srgb, var(--border) 75%, transparent);
}
.bookings-page .bk-op-tl__weight--normal .bk-op-tl__title {
  font-weight: 600;
}
.bookings-page .bk-op-tl__weight--high .bk-op-tl__title {
  font-weight: 600;
  font-size: 0.82rem;
}
.bookings-page .bk-op-tl__weight--critical .bk-op-tl__title {
  font-weight: 700;
  font-size: 0.84rem;
}
.bookings-page .bk-op-tl__weight--high {
  padding: 0.36rem 0.44rem 0.38rem;
}
.bookings-page .bk-op-tl__weight--critical {
  padding: 0.4rem 0.48rem 0.42rem;
  border-left-width: 3px;
}
.bookings-page .bk-op-tl__card--pivot {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}
.bookings-page .bk-op-tl__card--low {
  opacity: 0.58;
  padding: 0.2rem 0.3rem 0.22rem;
  border-color: color-mix(in srgb, var(--border) 28%, transparent) !important;
  background: transparent !important;
  border-left-width: 2px !important;
  border-left-color: color-mix(in srgb, var(--muted) 22%, var(--border) 78%) !important;
}
.bookings-page .bk-op-tl__card--low .bk-op-tl__title {
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--muted);
}
.bookings-page .bk-op-tl__card--low .bk-op-tl__glyph {
  opacity: 0.5;
  transform: scale(0.9);
}
.bookings-page .bk-op-tl__card--low .bk-op-tl__when {
  opacity: 0.55;
  font-size: 0.55rem;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__card {
  text-align: right;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__title {
  text-align: right;
}
.bookings-page .bk-op-tl__head {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin: 0;
}
.bookings-page .bk-op-tl__title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  align-items: flex-start;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__title-block {
  align-items: flex-end;
}
.bookings-page .bk-op-tl__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.3rem 0.45rem;
  width: 100%;
  justify-content: flex-start;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__title-row {
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.bookings-page .bk-op-tl__pivot-badge {
  flex-shrink: 0;
  margin-top: 0.06rem;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--text) 88%, var(--warning, #d97706) 12%);
  background: color-mix(in srgb, var(--warning, #f59e0b) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning, #f59e0b) 28%, var(--border));
}
.bookings-page .bk-op-tl__meta-row {
  display: flex;
  width: 100%;
  justify-content: flex-start;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__meta-row {
  justify-content: flex-end;
}
.bookings-page .bk-op-tl__glyph {
  flex-shrink: 0;
  min-width: 1.05rem;
  height: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface) 85%, var(--border) 15%);
  border: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}
[data-theme='dark'] .bookings-page .bk-op-tl__glyph {
  background: color-mix(in srgb, var(--surface) 90%, #fff 4%);
}
.bookings-page .bk-op-tl__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.32;
  color: var(--text);
}
.bookings-page .bk-op-tl__when {
  font-size: 0.56rem;
  font-weight: 500;
  color: var(--muted);
  opacity: 0.62;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.bookings-page .bk-op-tl__subtitle {
  margin: 0.14rem 0 0;
  padding-left: 1.4rem;
  font-size: 0.66rem;
  line-height: 1.35;
  color: var(--muted);
  opacity: 0.88;
}
.bookings-page .bk-op-tl__event--guest .bk-op-tl__subtitle {
  padding-left: 0;
  padding-right: 1.4rem;
}

.bookings-page .bk-op-loading,
.bookings-page .bk-op-error,
.bookings-page .bk-op-placeholder,
.bookings-page .bk-op-empty {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
}

.bookings-page .bk-detail-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  margin-top: 0.15rem;
}
.bookings-page .bk-detail-main-grid__col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.bookings-page .bk-detail-main-grid__col .bk-card {
  margin: 0;
}
@media (min-width: 1300px) {
  .bookings-page .bk-detail-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 0.8rem;
    align-items: start;
  }
  .bookings-page .bk-detail-main-grid--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .bookings-page .bk-detail-main-grid__col--left {
    grid-column: 1;
  }
  .bookings-page .bk-detail-main-grid__col--right {
    grid-column: 2;
  }
}
.bookings-page .bk-timeline-section {
  margin-top: 0.35rem;
}
.bookings-page .bk-detail-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.75rem 0.85rem 0.95rem;
  max-height: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.bookings-page .bk-detail-empty {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.bookings-page .bk-detail-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.bookings-page .bk-detail-title {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.25;
}
.bookings-page .bk-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.5rem 0 0.42rem;
}
.bookings-page .bk-actions-menu-wrap {
  position: relative;
}
.bookings-page .bk-actions-menu-toggle {
  min-width: 2rem;
  font-weight: 700;
}
.bookings-page .bk-actions-menu {
  /* fixed + coords JS : sort des conteneurs en overflow-y auto / hidden (panneau résa). */
  position: fixed;
  top: var(--bk-actions-menu-top, 0);
  right: var(--bk-actions-menu-right, 0);
  left: auto;
  bottom: auto;
  min-width: 14.5rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
  z-index: 400;
  overflow: hidden;
}
.bookings-page .bk-actions-menu__item {
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: inherit;
  text-align: left;
  padding: 0.48rem 0.62rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.bookings-page .bk-actions-menu__item:last-child {
  border-bottom: none;
}
.bookings-page .bk-actions-menu__item:hover {
  background: var(--surface-hover);
}
.bookings-page .bk-copy-feedback {
  font-size: 0.85rem;
  color: var(--success);
}
.bookings-page .bk-section {
  margin: 1rem 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  background: var(--surface);
}
.bookings-page .bk-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.35rem 0;
  font-size: 0.92rem;
}
.bookings-page .bk-dl {
  display: grid;
  grid-template-columns: minmax(6.5rem, auto) minmax(0, 1fr);
  gap: 0.35rem 0.65rem;
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
}
.bookings-page .bk-dl dt {
  color: var(--muted);
  margin: 0;
}
.bookings-page .bk-dl dd {
  margin: 0;
}
.bookings-page .bk-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.bookings-page .bk-mini-table th,
.bookings-page .bk-mini-table td {
  border-bottom: 1px solid var(--border);
  padding: 0.25rem 0.35rem;
  text-align: left;
}
.bookings-page .bk-list {
  margin: 0.25rem 0 0 1rem;
  font-size: 0.85rem;
}
.bookings-page .bk-timeline {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}
.bookings-page .bk-timeline-item {
  border-left: 2px solid var(--border);
  padding: 0.2rem 0 0.35rem 0.5rem;
  margin-left: 0.35rem;
  list-style: none;
}
.bookings-page .bk-timeline-entry {
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
}
.bookings-page .bk-timeline-summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  cursor: pointer;
  font-weight: 500;
  font-size: 0.82rem;
  padding: 0.25rem 0;
}
.bookings-page .bk-timeline-summary-end {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  margin-left: auto;
}
.bookings-page .bk-timeline-summary::-webkit-details-marker {
  display: none;
}
.bookings-page .bk-timeline-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  flex-shrink: 0;
  line-height: 1;
}
.bookings-page .bk-timeline-ico .bk-tl-sym {
  font-size: 0.95rem;
  line-height: 1;
}
.bookings-page .bk-timeline-summary-text {
  flex: 1 1 8rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookings-page .bk-timeline-time-inline {
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.bookings-page .bk-timeline-badge {
  max-width: 5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bookings-page .bk-timeline-body {
  margin: 0.35rem 0 0.5rem 1.85rem;
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--border) 35%, transparent);
  font-size: 0.8rem;
  line-height: 1.4;
  word-break: break-word;
}
.bookings-page .bk-timeline-body-title {
  margin: 0 0 0.35rem;
  color: var(--text);
}
.bookings-page .bk-timeline-body-detail {
  margin: 0;
}
.bookings-page .bk-timeline-time {
  font-size: 0.72rem;
  color: var(--muted);
  margin-right: 0.35rem;
}
.bookings-page .bk-timeline-type {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted);
}
.bookings-page .bk-timeline-title {
  font-weight: 500;
  margin-top: 0.15rem;
}
.bookings-page .bk-timeline-detail {
  font-size: 0.8rem;
  word-break: break-word;
}
.bookings-page .bk-pill {
  display: inline-block;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border);
}
.bookings-page .bk-pill--ok {
  border-color: var(--success-border);
  color: var(--success);
  background: color-mix(in srgb, var(--success) 10%, transparent);
}
.bookings-page .bk-pill--warn {
  border-color: var(--warning-border);
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 12%, transparent);
}
.bookings-page .bk-pill--danger {
  border-color: var(--danger-border);
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}
.bookings-page .bk-pill--muted {
  color: var(--muted);
}
.bookings-page .bk-direct-label {
  font-size: 0.65rem;
  color: var(--muted);
}
.bookings-page .bk-anomaly--sm {
  min-width: 1.25rem;
  padding: 0.06rem 0.28rem;
  font-size: 0.68rem;
}

@media (min-width: 769px) and (max-width: 1299px) {
  .bookings-page .bk-detail-content {
    font-size: 0.88rem;
  }
}

/* < 1300px : pas de split — liste plein écran puis fiche plein écran (conv-mobile-chat) */
@media (max-width: 1299px) {
  .bookings-page .bookings-layout {
    min-height: calc(100vh - 2 * var(--main-padding));
  }

  body.has-app-shell .bookings-page .bookings-layout {
    min-height: 0;
    flex: 1;
  }

  .bookings-page .bookings-layout .bk-sidebar {
    grid-column: 1;
    border-right: none;
  }

  .bookings-page .bookings-layout:not(.conv-mobile-chat) .bk-detail-panel {
    display: none;
  }

  .bookings-page .bookings-layout.conv-mobile-chat .bk-sidebar {
    display: none;
  }

  .bookings-page .bookings-layout.conv-mobile-chat .bk-detail-panel {
    display: flex;
    grid-column: 1;
    border-left: none;
    min-height: 0;
    background: var(--surface);
  }

  body.has-app-shell .reviews-layout.conv-mobile-chat .bk-detail-content {
    max-height: none;
  }
}

/* ── Automations / Runs + Commandes : enveloppe « carte » comme Réservations (surface, bordure) ── */
.automations-runs-page,
.automations-commandes-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  align-self: stretch;
  box-sizing: border-box;
  gap: 0;
  height: 100%;
}

.automations-runs-page > .shell-page__body,
.automations-commandes-page > .shell-page__body {
  margin-top: 0;
}

body.has-app-shell.shell-workspace-scroll .automations-runs-page > .shell-page__body,
body.has-app-shell.shell-workspace-scroll .automations-commandes-page > .shell-page__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

automation-runs-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.automations-runs-frame {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: min(75vh, 900px);
  flex: 1 1 auto;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface);
}

body.has-app-shell .automations-runs-page .automations-runs-frame,
body.has-app-shell .automations-commandes-page .automations-runs-frame {
  min-height: 0;
  flex: 1;
  height: auto;
  max-height: none;
}

.automations-runs-frame.automations-cc-frame automation-command-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
}

.automations-runs-frame.automations-cc-frame .automation-command-center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.automations-runs-frame.automations-cc-frame .automation-cc-grid {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}

.automations-runs-frame.automations-cc-frame .automation-cc-catalog {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0.65rem 0.75rem 0.5rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.automations-runs-frame.automations-cc-frame .automation-cc-filters {
  flex-shrink: 0;
}

.automations-runs-frame.automations-cc-frame .automation-cc-catalog-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 0.35rem;
  padding-right: 0.15rem;
}

.automations-runs-frame.automations-cc-frame .automation-cc-catalog-scroll .conv-section + .conv-section {
  margin-top: 0.35rem;
}

.automations-runs-frame.automations-cc-frame .automation-cc-run-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.85rem 1rem 1rem;
  background: var(--surface);
}

@media (max-width: 900px) {
  .automations-runs-frame.automations-cc-frame .automation-cc-catalog {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: min(52vh, 420px);
  }
}

.automations-runs-frame .automation-runs-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.automations-runs-frame .automation-runs-split {
  gap: 0;
  align-items: stretch;
  min-height: 0;
  flex: 1 1 auto;
}

.automations-runs-frame .automation-runs-list-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  padding: 0.65rem 0.75rem;
  background: var(--surface);
  border-right: 1px solid var(--border);
}

.automations-runs-frame .automation-runs-detail-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: var(--surface);
}

.automation-runs-detail-stack {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.automations-runs-frame .automation-runs-list-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--border);
}

.automation-runs-filters-card {
  margin-bottom: 0.45rem;
}

.automation-runs-filters-grid .settings-input {
  width: 100%;
  max-width: 100%;
}

.automation-runs-results-count {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
}

.automation-runs-infinite-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}

.automation-runs-loading-more {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.25rem;
  font-size: 0.78rem;
}

@media (min-width: 1300px) {
  .automations-runs-frame .automation-runs-split {
    grid-template-columns: 300px minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .automations-runs-frame .automation-runs-list-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ── Automations : runs + command center ── */
.automation-runs-layout {
  min-height: 320px;
}
.automation-runs-split {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 768px) {
  .automation-runs-split {
    grid-template-columns: 1fr;
  }
}
.automation-runs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 0;
}
.automation-runs-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  padding: 0.26rem 0.45rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  font-size: 0.78rem;
}
.automation-runs-list-body {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
  flex: 1;
}
.automation-runs-list-title {
  font-weight: 600;
  font-size: 0.78rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.automation-runs-list-title--error {
  color: var(--danger, #dc2626);
}
.automation-runs-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.2;
}
.automation-runs-list-item:hover {
  background: var(--surface-elevated, #f8fafc);
}
.automation-runs-list-item.is-active {
  background: var(--surface-selected, #eef2ff);
}
.automation-runs-list-item--error-unread {
  box-shadow: inset 3px 0 0 0 #ef4444;
}
[data-theme="dark"] .automation-runs-list-item--error-unread {
  box-shadow: inset 3px 0 0 0 #f87171;
}

.automation-runs-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.38rem;
  background: var(--muted, #94a3b8);
}
.automation-runs-status-dot--queued {
  background: #94a3b8;
}
.automation-runs-status-dot--running {
  background: #3b82f6;
  box-shadow: 0 0 0 2px color-mix(in srgb, #3b82f6 35%, transparent);
}
.automation-runs-status-dot--success {
  background: #22c55e;
}
.automation-runs-status-dot--error {
  background: #ef4444;
}
.automation-runs-status-dot--cancelled {
  background: #a1a1aa;
}

.automation-runs-badge {
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 0.12rem;
  font-size: 0.6rem;
  text-transform: uppercase;
  padding: 0.12rem 0.35rem;
  border-radius: 4px;
  font-weight: 600;
}
.automation-runs-badge--queued,
.automation-runs-badge--running {
  background: #dbeafe;
  color: #1e40af;
}
.automation-runs-badge--success {
  background: #d1fae5;
  color: #065f46;
}
.automation-runs-badge--error {
  background: #fee2e2;
  color: #991b1b;
}
.automation-runs-trigger {
  flex-shrink: 0;
  max-width: 100%;
}
.automation-runs-time {
  font-size: inherit;
}
.automation-runs-detail-col {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
}
.automation-runs-detail-head {
  margin-bottom: 0.5rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
  flex-shrink: 0;
}
.automation-runs-detail-head-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  width: 100%;
  flex-wrap: wrap;
}
.automation-runs-detail-head-text {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.automation-runs-detail-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}
.automation-runs-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.28rem 0.65rem 0.28rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid var(--border-subtle, #e2e8f0);
  background: var(--bg-secondary, #f8fafc);
  color: var(--text-secondary, #475569);
}
.automation-runs-status-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.85;
}
.automation-runs-status-chip__label {
  letter-spacing: 0.01em;
}
.automation-runs-status-chip__spinner {
  flex-shrink: 0;
  animation: automation-runs-spin 0.85s linear infinite;
}
.automation-runs-status-chip--queued {
  color: #b45309;
  background: #fffbeb;
  border-color: #fcd34d;
}
.automation-runs-status-chip--running {
  color: #1d4ed8;
  background: #eff6ff;
  border-color: #93c5fd;
}
.automation-runs-status-chip--success {
  color: #047857;
  background: #ecfdf5;
  border-color: #6ee7b7;
}
.automation-runs-status-chip--error {
  color: var(--danger, #dc2626);
  background: var(--danger-bg, #fef2f2);
  border-color: var(--danger-border, #fecaca);
}
.automation-runs-status-chip--cancelled {
  color: #64748b;
  background: #f1f5f9;
  border-color: #cbd5e1;
}
.automation-runs-detail-title {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.3;
}
.automation-runs-detail-title--error {
  color: var(--danger, #dc2626);
}
.automation-runs-tech-key {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  opacity: 0.85;
  flex-shrink: 0;
}
.automation-runs-stop-btn {
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.automation-runs-stop-btn .automation-runs-stop-icon {
  flex-shrink: 0;
  opacity: 0.95;
}
.automation-runs-stop-more-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 1.05rem;
  line-height: 1;
}
.automation-runs-stop-menu .action-menu-panel {
  z-index: 7000;
}
.automation-runs-more-menu {
  min-width: 220px;
}
.automation-runs-more-item-danger {
  color: var(--danger);
}
.automation-runs-more-item-danger:hover:not(:disabled) {
  background: var(--danger-bg);
}
@keyframes automation-runs-spin {
  to {
    transform: rotate(360deg);
  }
}
.automation-runs-log-filter-row {
  margin-bottom: 0.45rem;
  flex-shrink: 0;
}
.automation-runs-log-filter-row .conv-search {
  width: 100%;
}

.automation-runs-log-scroll {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.automation-runs-log-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.automation-runs-log-day-wrap {
  margin-bottom: 0.75rem;
}
.automation-runs-log-day-wrap:last-child {
  margin-bottom: 0;
}

/* Même principe que Transactions : ligne horizontale + libellé centré (finance-tx-year-separator). */
.automation-runs-log-scroll .automation-runs-log-day-separator {
  margin-left: 0;
  margin-right: 0;
}
.automation-runs-log-day-wrap:first-child .automation-runs-log-day-separator {
  margin-top: 0.25rem;
}

.automation-runs-log-day-inner {
  list-style: none;
  margin: 0;
  padding: 0;
}

.automation-runs-log-day-inner .automation-runs-log-rows__item {
  border-bottom: 1px solid var(--border-subtle, #e2e8f0);
}
.automation-runs-log-day-inner .automation-runs-log-rows__item:last-child {
  border-bottom: none;
}

.automation-runs-log-row {
  display: grid;
  grid-template-columns: 54px minmax(2.75rem, 3.6rem) minmax(0, 1fr) 26px;
  gap: 0.35rem 0.5rem;
  align-items: baseline;
  padding: 0.28rem 0.1rem 0.28rem 0;
  font-size: 0.78rem;
  line-height: 1.35;
}
.automation-runs-log-row--expandable {
  cursor: pointer;
}
.automation-runs-log-row--expandable:focus {
  outline: none;
}
.automation-runs-log-row--expandable:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ring, #3b82f6) 85%, transparent);
  outline-offset: 1px;
  border-radius: 4px;
}
.automation-runs-log-row--expandable:hover .automation-runs-log-chevron {
  opacity: 1;
}
.automation-runs-log-row__time {
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  white-space: nowrap;
}
.automation-runs-log-row__lvl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.automation-runs-log-row--debug .automation-runs-log-row__lvl {
  color: #64748b;
}
.automation-runs-log-row--info .automation-runs-log-row__lvl {
  color: #2563eb;
}
.automation-runs-log-row--warn .automation-runs-log-row__lvl {
  color: #b45309;
}
.automation-runs-log-row--error .automation-runs-log-row__lvl {
  color: #dc2626;
}
.automation-runs-log-row--error-unread {
  box-shadow: inset 3px 0 0 0 #ef4444;
  border-radius: 4px;
}
[data-theme="dark"] .automation-runs-log-row--error-unread {
  box-shadow: inset 3px 0 0 0 #f87171;
}
.automation-runs-log-row__msg {
  min-width: 0;
  word-break: break-word;
  color: var(--text);
}
.automation-runs-log-row__chevcell {
  text-align: right;
  vertical-align: middle;
  color: var(--muted);
  padding-right: 2px;
  min-height: 14px;
}
.automation-runs-log-chevron {
  display: inline-block;
  opacity: 0.75;
  transition: transform 0.16s ease, opacity 0.16s ease;
  pointer-events: none;
}
.automation-runs-log-chevron--open {
  transform: rotate(90deg);
}

.automation-runs-log-payload {
  margin: 0 0 0.35rem;
  padding: 0.4rem 0.5rem;
  white-space: pre-wrap;
  font-size: 0.7rem;
  line-height: 1.4;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text-secondary, #6b7280);
  background: color-mix(in srgb, var(--bg-secondary) 65%, transparent);
  border-radius: 4px;
  overflow-x: auto;
  border-left: 2px solid var(--border);
}
[data-theme="dark"] .automation-runs-log-row--info .automation-runs-log-row__lvl {
  color: #93c5fd;
}
[data-theme="dark"] .automation-runs-log-row--warn .automation-runs-log-row__lvl {
  color: #fcd34d;
}
[data-theme="dark"] .automation-runs-log-row--error .automation-runs-log-row__lvl {
  color: #fca5a5;
}
.shell-page__body--flush {
  padding-top: 0;
}

.automation-command-center {
  width: 100%;
}
.automation-cc-grid {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 900px) {
  .automation-cc-grid {
    grid-template-columns: 1fr;
  }
}
.automation-cc-heading {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}
.automation-cc-results-count {
  margin: 0.35rem 0 0;
}

/* Filtres commandes : même disposition que finance/runs, sans carte (bordure / fond). */
.automation-cc-filters {
  margin: 0 0 0.45rem;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
}

.automation-cc-action-list {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0 0 0 0.25rem;
}
.automation-cc-action-btn {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 0.35rem 0.45rem;
  margin-bottom: 0.2rem;
  cursor: pointer;
}
.automation-cc-action-btn:hover {
  background: var(--surface-elevated, #f1f5f9);
}
.automation-cc-action-btn.is-active {
  border-color: var(--accent, #6366f1);
  background: #eef2ff;
}
.automation-cc-action-key {
  display: block;
  font-weight: 400;
  font-size: 0.84rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text, inherit);
}

.automation-cc-action-desc {
  display: block;
  margin-top: 0.08rem;
  font-size: 0.7rem;
  line-height: 1.3;
  font-weight: 400;
  color: var(--muted);
}

[data-theme='dark'] .automation-cc-action-desc {
  color: var(--muted, #94a3b8);
}
.automation-cc-args .field {
  margin-bottom: 0.65rem;
}
.automation-cc-args label span {
  display: block;
  font-size: 0.8rem;
  margin-bottom: 0.2rem;
}
.automation-cc-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.automation-cc-actions-row {
  margin-top: 0.75rem;
}
.automation-cc-subheading {
  margin: 1rem 0 0.35rem;
  font-size: 0.92rem;
}
.automation-cc-log {
  max-height: 240px;
}
.callout-warn {
  border: 1px solid var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-hover);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

/* Bandeaux d’état en page (composant page-alert) — pas les toasts ni auth-error */
.page-alert {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin: 0 0 1rem;
  line-height: 1.45;
  font-size: 0.92rem;
}
.page-alert--compact {
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.88rem;
}
.page-alert__text {
  margin: 0;
}
.page-alert__text + .page-alert__slot:not(:empty) {
  margin-top: 0.35rem;
}
.page-alert__slot:empty {
  display: none;
}
.page-alert__slot p {
  margin: 0 0 0.35rem;
}
.page-alert__slot p:last-child {
  margin-bottom: 0;
}
.page-alert--error {
  border-color: var(--danger-border);
  background: var(--danger-bg);
  color: var(--danger);
}
.page-alert--warning {
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-hover);
}
.page-alert--info {
  border-color: var(--border);
  background: var(--bg-secondary);
  color: var(--text);
}
.page-alert--success {
  border-color: var(--success-border);
  background: var(--success-bg);
  color: var(--success);
}
.settings-users-page-alert {
  margin-top: 0.75rem;
}
.agent-llm-error.page-alert {
  display: inline-block;
  margin: 0 0 0 0.5rem;
  vertical-align: middle;
}

.menage-page .menage-card {
  margin-bottom: 1rem;
}
.menage-page .menage-unified-planning {
  margin-bottom: 1rem;
}
.menage-page .menage-unified-planning__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}
.menage-page .menage-unified-planning__title-block h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}
.menage-page .menage-unified-planning__subtitle {
  margin: 0;
  max-width: 48rem;
  line-height: 1.45;
}
.menage-page .menage-unified-planning__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.menage-page .menage-unified-planning__date {
  margin-bottom: 0;
}
.menage-page .menage-unified-planning__body {
  padding-top: 0.5rem;
}
.menage-page .menage-unified-section__lead {
  margin: 0 0 0.65rem;
  line-height: 1.45;
}
.menage-page .menage-legacy-dash {
  margin-top: 0.35rem;
}
.menage-page .menage-legacy-section {
  margin-top: 1.35rem;
}
.menage-page .menage-legacy-section:first-of-type {
  margin-top: 0.35rem;
}
.menage-page .menage-legacy-h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}
.menage-page .menage-legacy-h2__meta {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-secondary, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  color: var(--text-muted);
}
.menage-page .menage-legacy-lead {
  margin: 0 0 0.45rem;
  line-height: 1.4;
}
.menage-page .menage-table--legacy {
  font-size: 0.8125rem;
}
.menage-page .menage-table--legacy th,
.menage-page .menage-table--legacy td {
  padding: 0.35rem 0.45rem;
  vertical-align: top;
}
.menage-page .menage-th-center,
.menage-page .menage-td-center {
  text-align: center;
}
.menage-page .menage-th-nowrap {
  white-space: nowrap;
}
.menage-page .menage-table-wrap--legacy {
  max-height: min(48vh, 520px);
  overflow: auto;
  margin-top: 0.25rem;
}
.menage-page .menage-td-apt {
  white-space: nowrap;
}
.menage-page .menage-row-action {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.menage-page .menage-row-action:hover .menage-row-action__name {
  text-decoration: underline;
  color: var(--accent, #4f46e5);
}
.menage-page .menage-row-action__ico {
  flex-shrink: 0;
  color: var(--text-muted, #64748b);
}
.menage-page .menage-row-action__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menage-page .menage-cell-day {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  text-transform: capitalize;
  margin-bottom: 0.12rem;
}
.menage-page .menage-hint {
  font-size: 0.72rem;
  font-weight: 600;
  margin: 0.1rem 0 0.15rem;
}
.menage-page .menage-hint--move {
  color: #059669;
}
.menage-page .menage-hint--ext {
  color: #059669;
}
.menage-page .menage-time-suffix {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.menage-page .menage-time--default {
  color: #9ca3af;
  font-weight: 500;
}
.menage-page .menage-time--good {
  color: #16a34a;
  font-weight: 600;
}
.menage-page .menage-time--warn {
  color: #dc2626;
  font-weight: 600;
}
.menage-page .menage-time--muted {
  color: var(--text-muted);
  font-weight: 500;
}
/** Prolongation / enchaînement (comme l’ancien « extension-highlight ») : ligne atténuée, libellés verts conservés. */
.menage-page .menage-tr--extension {
  background: color-mix(in srgb, var(--surface-elevated, #f1f5f9) 65%, transparent);
}
.menage-page .menage-tr--extension .menage-row-action__name {
  text-decoration: line-through;
  color: #9ca3af;
}
.menage-page .menage-tr--extension .menage-row-action:hover .menage-row-action__name {
  color: #6b7280;
}
.menage-page .menage-future-panel {
  margin-top: 1.25rem;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  padding: 0 0.35rem;
  background: color-mix(in srgb, var(--surface-elevated, #f8fafc) 40%, var(--surface));
}
.menage-page .menage-future-panel__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.55rem 0.35rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
}
.menage-page .menage-future-panel__summary::-webkit-details-marker {
  display: none;
}
.menage-page .menage-future-panel__chev {
  display: inline-block;
  width: 0.55rem;
  flex-shrink: 0;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.menage-page .menage-future-panel__chev::before {
  content: '▶';
}
.menage-page .menage-future-panel[open] .menage-future-panel__chev {
  transform: rotate(90deg);
}
.menage-page .menage-future-panel__title {
  font-size: 1.02rem;
}
.menage-page .menage-future-panel__hint {
  font-weight: 400;
}
.menage-page .menage-future-panel__body {
  padding: 0 0.35rem 0.65rem;
}
.menage-page .menage-tools-panel {
  margin-top: 1rem;
  border: 1px dashed var(--border-subtle, #cbd5e1);
  border-radius: 10px;
  padding: 0 0.35rem;
}
.menage-page .menage-tools-panel__summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.35rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
}
.menage-page .menage-tools-panel__summary::-webkit-details-marker {
  display: none;
}
.menage-page .menage-tools-panel__chev {
  margin-top: 0.05rem;
}
.menage-page .menage-tools-panel__body {
  padding: 0 0.5rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.menage-page .menage-schedule-list--compact {
  margin: 0.25rem 0 0;
  font-size: 0.84rem;
}
.menage-page .menage-equipe-block {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  background: var(--surface);
}
.menage-page .menage-equipe-block__title {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.menage-page .menage-equipe-block--sim .menage-feasibility-grid {
  margin-top: 0.15rem;
}
.menage-page .menage-equipe-hint {
  margin: 0;
}
.menage-page .menage-tools-panel .menage-api-foot {
  margin: 0;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.menage-page__panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
}
.menage-page__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.menage-page .menage-block-lead {
  margin: 0 0 0.75rem;
}
.menage-page .menage-api-foot {
  margin: 0;
}
.menage-page .menage-scheduling-banner {
  margin-top: 0.75rem;
}
.menage-page .menage-scheduling-banner__title {
  font-weight: 600;
  margin: 0 0 0.35rem;
}
.menage-page .menage-scheduling-banner__line {
  margin: 0.15rem 0;
}
.menage-page .menage-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.menage-page .menage-section-header h3 {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.menage-page .menage-section-count {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-elevated, #f1f5f9);
  border: 1px solid var(--border-subtle, #e2e8f0);
  color: var(--text-muted);
  line-height: 1.2;
}
.menage-page .menage-future-details {
  margin: 0;
  border: 0;
}
.menage-page .menage-future-summary:not(.menage-unified-future-summary) {
  list-style: none;
}
.menage-page .menage-future-summary:not(.menage-unified-future-summary)::-webkit-details-marker {
  display: none;
}
.menage-page .menage-future-summary__main {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-width: 0;
  flex: 1;
}
.menage-page .menage-future-chevron {
  display: inline-block;
  margin-top: 0.38rem;
  flex-shrink: 0;
  font-size: 0.55rem;
  line-height: 1;
  color: var(--text-muted);
  transition: transform 0.15s ease;
}
.menage-page .menage-future-chevron::before {
  content: '▶';
}
.menage-page .menage-future-details[open] .menage-future-chevron {
  transform: rotate(90deg);
}
.menage-page .menage-future-summary__titles {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.menage-page .menage-future-summary__h {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.menage-page .menage-table-wrap--future {
  max-height: min(52vh, 520px);
  overflow-y: auto;
}
.menage-page .menage-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 0.75rem;
}
.menage-page .menage-row .field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 160px;
}
.menage-page .menage-date-field {
  margin-bottom: 0;
  min-width: 200px;
}
.menage-page .menage-feasibility-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) minmax(180px, 1.1fr) minmax(140px, 0.85fr);
  gap: 1rem;
  align-items: end;
  margin-bottom: 0.75rem;
}
@media (max-width: 720px) {
  .menage-page .menage-feasibility-grid {
    grid-template-columns: 1fr;
  }
}
.menage-page .menage-feasibility-grid .settings-form-group {
  margin-bottom: 0;
}
.menage-page .menage-feasibility-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}
.menage-page .menage-check--settings {
  margin-bottom: 0;
  color: var(--text-secondary, #64748b);
  font-size: 0.875rem;
}
.menage-page .menage-check--settings span {
  line-height: 1.35;
}
.menage-page .menage-panel-times .settings-form-group {
  margin-bottom: 0;
  min-width: 160px;
}
.menage-page .menage-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
@media (max-width: 768px) {
  .menage-page .menage-split {
    grid-template-columns: 1fr;
  }
}
.menage-page .menage-details {
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
  background: var(--surface-elevated, #f8fafc);
}
.menage-page .menage-pre {
  margin: 0.35rem 0 0;
  max-height: 280px;
  overflow: auto;
  font-size: 0.78rem;
  white-space: pre-wrap;
}
.menage-page .menage-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  margin-bottom: 0.5rem;
}

.menage-table-wrap {
  overflow-x: auto;
  margin-top: 0.75rem;
}
.menage-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.menage-table th,
.menage-table td {
  border: 1px solid var(--border-subtle, #e2e8f0);
  padding: 0.45rem 0.55rem;
  text-align: left;
  vertical-align: top;
}
.menage-table th {
  background: var(--surface-elevated, #f1f5f9);
}
.menage-tr--bad {
  background: #fff7ed;
}
.menage-time-pill {
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
}
.menage-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  margin-right: 0.35rem;
}
.menage-badge--bad {
  background: #fee2e2;
  color: #991b1b;
}
.menage-panel {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 10px;
  background: var(--surface-elevated, #f8fafc);
  max-width: 520px;
}
.menage-panel-block {
  margin-bottom: 1rem;
}
.menage-panel-block h4 {
  margin: 0 0 0.5rem;
  font-size: 0.92rem;
}
.menage-action-msg {
  color: var(--accent-foreground, #1e293b);
}
.menage-schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
}
.menage-schedule-list li {
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border-subtle, #e2e8f0);
}