/* ─── CUSTOM FONTS ─────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Nebbiolo';
  src: url('/app/assets/fonts/Nebbiolo-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Britanica';
  src: url('/app/assets/fonts/Britanica-Black-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Britanica';
  src: url('/app/assets/fonts/Britanica-Black-Regular.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Britanica';
  src: url('/app/assets/fonts/Britanica-Black-Regular.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Britanica';
  src: url('/app/assets/fonts/Britanica-Black-Regular.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Britanica';
  src: url('/app/assets/fonts/Britanica-Black-Regular.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ─── DESIGN TOKENS — DARK (default) ───────────────────────────────────────── */

:root {
  /* Layout */
  --sidebar-w: 220px;
  --topbar-h: 48px;

  /* Surfaces — dark mode defaults (State A: flat, no blur) */
  --bg-app: #0A0A0A;
  --sidebar-bg: #0D0D0D;
  --main-bg: transparent;
  --card-bg: #141414;
  --elevated: #1A1A1A;
  --input-bg: rgba(255,255,255,0.07);
  --input-border: rgba(255,255,255,0.12);
  --input-color: #ffffff;
  --hover-bg: rgba(255,255,255,0.07);

  /* Borders */
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.18);

  /* Text */
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.58);
  --text-muted: rgba(255,255,255,0.33);

  /* Accents */
  --accent: #ffffff;
  --accent-hover: rgba(255,255,255,0.82);
  --accent-dim: rgba(255,255,255,0.08);
  --accent-primary: #1A2B5C;
  --accent-secondary: #7FB3FF;
  --cut-color: #ffffff;
  --timeline-color: #ffffff;
  --success: #22c55e;

  /* Shape */
  --radius: 14px;
  --radius-lg: 18px;
  --radius-sm: 8px;

  /* Typography */
  --font-logo:    'Nebbiolo', -apple-system, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  --font-text:    -apple-system, BlinkMacSystemFont, 'SF Pro Text',    system-ui, sans-serif;
}

/* ─── LIGHT MODE TOKENS ──────────────────────────────────────────────────────── */

:root[data-theme="light"] {
  --bg-app: #FFFFFF;
  --sidebar-bg: rgba(245,245,245,0.88);
  --card-bg: rgba(245,245,245,0.88);
  --elevated: rgba(250,250,250,0.95);
  --input-bg: rgba(0,0,0,0.05);
  --input-border: rgba(0,0,0,0.12);
  --input-color: #0A0A0A;
  --hover-bg: rgba(0,0,0,0.05);
  --border: rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.14);
  --text-primary: #0A0A0A;
  --text-secondary: rgba(10,10,10,0.58);
  --text-muted: rgba(10,10,10,0.38);
}

/* ─── SYSTEM MODE — follows OS preference ────────────────────────────────────── */

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] {
    --bg-app: #FFFFFF;
    --sidebar-bg: rgba(245,245,245,0.88);
    --card-bg: rgba(245,245,245,0.88);
    --elevated: rgba(250,250,250,0.95);
    --input-bg: rgba(0,0,0,0.05);
    --input-border: rgba(0,0,0,0.12);
    --input-color: #0A0A0A;
    --hover-bg: rgba(0,0,0,0.05);
    --border: rgba(0,0,0,0.07);
    --border-strong: rgba(0,0,0,0.14);
    --text-primary: #0A0A0A;
    --text-secondary: rgba(10,10,10,0.58);
    --text-muted: rgba(10,10,10,0.38);
  }
}

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

input:not([type="range"]):not([type="checkbox"]):not([type="file"]), select, textarea {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  color: var(--input-color);
  font-family: inherit;
}

input:not([type="range"]):not([type="checkbox"]):not([type="file"]):focus, select:focus, textarea:focus {
  border-color: rgba(255,255,255,0.35);
  background: var(--input-bg);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.06);
}

/* Remplace l'outline bleu Chromium sur tous les boutons */
button:focus-visible {
  outline: 2px solid rgba(255,255,255,0.22);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

html, body { height: 100%; overflow: hidden; }

body {
  background: transparent !important;
  background-image: none !important;
  color: var(--text-primary);
  font-family: var(--font-text);
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: none;
  letter-spacing: 0.01em;
}

/* ─── APP SHELL ──────────────────────────────────────── */

.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ─── SIDEBAR ────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Draggable region for macOS traffic lights */
.sidebar-drag {
  height: 28px;
  flex-shrink: 0;
  -webkit-app-region: drag;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 0 16px 20px;
  flex-shrink: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 70%);
}

.logo-text {
  font-family: var(--font-logo);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar-nav::-webkit-scrollbar { width: 0; }

.nav-section { display: flex; flex-direction: column; gap: 2px; }

.nav-section-label {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 0 8px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13.5px;
  font-weight: 450;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  -webkit-app-region: no-drag;
  position: relative;
}

.nav-item:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--hover-bg);
  color: var(--text-primary);
  font-weight: 500;
}


.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 9px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
  margin-left: auto;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.nav-badge.soon {
  background: rgba(255,255,255,0.09);
  color: var(--accent);
  border: 1px solid rgba(255,255,255,0.12);
}
.nav-badge.new {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.2);
}

.nav-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-icon svg {
  display: block;
  transition: opacity 0.15s ease;
}

.sidebar-footer {
  flex-shrink: 0;
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plan-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.plan-text {
  font-size: 12px;
  color: var(--text-secondary);
}

.plan-text strong {
  color: var(--text-primary);
  font-weight: 600;
}

.app-version {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── MAIN ───────────────────────────────────────────── */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--main-bg);
}

/* ─── TOPBAR ─────────────────────────────────────────── */

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  -webkit-app-region: drag;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}

.breadcrumb-root {
  color: var(--text-muted);
  font-weight: 500;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: color 0.12s ease;
}

.breadcrumb-root:hover {
  color: var(--text-primary);
}

.breadcrumb-sep {
  color: var(--text-muted);
  font-size: 15px;
}

.breadcrumb-current {
  color: var(--text-primary);
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  -webkit-app-region: no-drag;
}

.status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--card-bg);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 20px;
}

/* ─── CONTENT ────────────────────────────────────────── */

/* Ligne .content + panneau Wesma AI docké, côte à côte — remplace l'ancien panneau
   position:fixed qui chevauchait la page (voir .wesma-side-panel plus bas). */
.main-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}

.content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
  transition: opacity 0.15s ease;
}

/* Écran Discussion plein-écran (.wesma-side-panel.fullpage, voir plus bas) — .content
   n'a alors AUCUN .screen visible (Discussion n'a pas de <div class="screen"> dédié, voir
   commentaire dans _doNavigateTo), mais restait quand même flex:1 : deux éléments à
   flex-grow:1 dans .main-body (lui + le panneau) se partageaient la largeur 50/50, laissant
   une bande vide entre la sidebar de nav et le panneau Discussion. Réduit à 0 dans ce cas
   (classe posée par _doNavigateTo) pour que le panneau prenne toute la largeur restante. */
.content.wesma-fullpage-active {
  flex: 0 0 0;
  width: 0;
}

/* ─── SCREENS ────────────────────────────────────────── */

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

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
}

.screen:not(.hidden) {
  animation: fadeIn 0.2s ease;
}

.screen-padded {
  padding: 32px 32px;
}

.screen-header {
  margin-bottom: 28px;
}

.screen-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.screen-sub {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ─── HOME ───────────────────────────────────────────── */

.home-hero-drop {
  border: 2px dashed rgba(255,255,255,0.18);
  border-radius: 20px;
  padding: 44px 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  margin-bottom: 32px;
  -webkit-app-region: no-drag;
}

.home-hero-drop:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.3);
}

.home-hero-drop.drag-over {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent);
  transform: scale(1.005);
}

.home-hero-drop-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  color: white;
}

.home-hero-drop-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.home-hero-drop-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.home-tools-row {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.home-tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  -webkit-app-region: no-drag;
}

.home-tool-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  color: #ffffff;
  transition: all 0.15s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  line-height: 0;
}

.home-tool-circle svg {
  display: block;
  flex-shrink: 0;
}

.home-tool:hover .home-tool-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-primary);
  transform: translateY(-2px);
}

.home-tool-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.home-projects-section {
  max-width: 100%;
}

.home-projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.home-projects-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.home-projects-seeall {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.home-projects-seeall:hover { color: var(--text-primary); }

.stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 20px 22px;
  transition: all 0.15s ease;
}

.stat-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.stat-label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.stat-sub {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.home-actions {
  display: flex;
  gap: 10px;
}

.btn-primary {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  font-size: 13px;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(0,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.3),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  transition: all 0.2s ease;
  -webkit-app-region: no-drag;
}

.btn-primary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
  box-shadow:
    0 4px 16px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

.btn-primary:active {
  transform: translateY(0px);
  background: rgba(255,255,255,0.1);
  box-shadow: none;
}

.btn-accent {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 14px;
  color: white;
  font-weight: 600;
  padding: 10px 20px;
  font-size: 13px;
  cursor: pointer;
  box-shadow:
    0 2px 8px rgba(255,255,255,0.06),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition: all 0.2s ease;
  -webkit-app-region: no-drag;
}

.btn-accent:hover {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 20px rgba(255,255,255,0.1);
  transform: translateY(-1px);
}

.btn-accent:active {
  transform: translateY(0px);
  box-shadow: none;
}

/* ─── EMPTY STATE ────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 20px;
  color: var(--text-secondary);
  text-align: center;
}

/* ─── SETTINGS ───────────────────────────────────────── */

.settings-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 520px;
  margin-bottom: 16px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}

/* Cards dont le dernier enfant est une .settings-row (Application, Apparence,
   etc.) : la row gère déjà son propre confort vertical (13px) et doit rester
   flush avec le bas de la card, comme avant — on annule le nouveau padding
   du parent juste pour elle. */
.settings-row:last-child {
  margin-bottom: -20px;
}

/* Sans ce padding sur .settings-section, tout paragraphe/div "libre" (pas
   .settings-row, pas .settings-section-label) collait directement sur le
   border de la card — ex: le texte "Donne 1 mois d'essai..." dans Parraine
   un ami. .settings-row et .settings-section-label géraient leur propre
   inset avant; ils compensent maintenant le nouveau padding du parent
   ci-dessous pour garder le même rendu (séparateurs plein-largeur inclus). */

.settings-section-label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  padding: 16px 0 10px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  margin: 0 -20px;
  border-top: 1px solid var(--border);
}

.creator-profile-step {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.creator-profile-step:last-child { margin-bottom: 0; }

.creator-profile-step-title {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 6px;
}

.creator-profile-step-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.settings-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.settings-value {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}

.settings-accent {
  color: var(--accent);
}

.btn-sm {
  background: var(--elevated);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-text);
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}

.settings-row-column {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.settings-row-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bg-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.bg-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.12);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color 0.15s, transform 0.1s;
}

.bg-thumb:hover {
  border-color: rgba(255,255,255,0.4);
  transform: scale(1.02);
}

.bg-thumb.selected {
  border-color: var(--accent);
}

.bg-thumb.selected::after {
  content: '✓';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whatsnew-entry {
  margin-bottom: 16px;
}

.whatsnew-entry:last-child {
  margin-bottom: 0;
}

.whatsnew-entry-version {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
}

.whatsnew-entry ul {
  margin: 0;
  padding-left: 18px;
}

.whatsnew-entry li {
  font-size: 13px;
  line-height: 1.6;
  color: #ccc;
  margin-bottom: 4px;
}

/* ─── driver.js product tour — liquid glass, même recette que .settings-section ─── */

.driver-popover {
  background: rgba(20, 20, 26, 0.75);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.3),
    inset 0 1px 0 rgba(255,255,255,0.08);
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

.driver-popover-title {
  color: white;
  font-size: 17px;
  font-weight: 700;
}

.driver-popover-description {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
  line-height: 1.6;
}

.driver-popover-close-btn {
  color: rgba(255,255,255,0.4);
  border-radius: 0 16px 0 0 !important;
  top: 2px !important;
  right: 2px !important;
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
  color: white;
}

.driver-popover-footer {
  margin-top: 18px;
}

.driver-popover-progress-text {
  color: rgba(255,255,255,0.45);
}

.driver-popover-footer-btn {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: none;
}

.driver-popover-footer-btn:hover,
.driver-popover-footer-btn:focus {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}

.driver-popover-arrow {
  border-color: rgba(26, 26, 32, 0.9);
}

/* L'élément ciblé lui-même : driver.js le focus() pour l'accessibilité clavier,
   et l'app n'a jamais de reset outline/focus pour les <button> (seulement pour
   input/select/textarea) — sans ça c'est le focus ring natif de Chromium qui
   s'affiche, d'où le "carré cyan plein". Pas de fond ajouté, juste un contour
   fin cohérent avec --accent. !important nécessaire : si l'élément ciblé est
   aussi le nav-item .active (ex. en cliquant "Précédent" après avoir navigué),
   .nav-item.active a une spécificité plus haute (2 classes) et gagnerait sinon. */
.driver-active-element {
  box-shadow: 0 0 0 2px var(--accent) !important;
}

.driver-active-element:focus {
  outline: none;
}

/* Pas de backdrop-filter sur .driver-overlay, volontairement : la sidebar
   (.sidebar) a déjà son propre backdrop-filter: blur(40px). Empiler un 2e flou
   sur cet overlay fixed (z-index 10000, par-dessus toute la sidebar) faisait
   flouter l'élément ciblé lui-même — deux backdrop-filter empilés à des
   z-index différents ne se composent pas proprement dans Chromium. Confirmé
   via getComputedStyle : l'élément ciblé n'avait jamais de backdrop-filter
   direct, le flou venait de cette interaction. L'assombrissement seul
   (overlayOpacity dans le JS) suffit pour l'effet spotlight. */

.btn-sm:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
  color: var(--text-primary);
}

/* ─── EDITOR SCREEN ──────────────────────────────────── */

.screen-editor {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  padding: 0;
}

.editor-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ─── TIMELINE ───────────────────────────────────────── */

.timeline-panel {
  width: 100%;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  height: 240px;
  overflow: hidden;
}

/* ─── AUDIO LIBRARY STRIP ────────────────────────────── */

.audio-library-panel {
  border-bottom: 1px solid var(--border);
  padding: 6px 10px;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  height: 84px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.audio-library-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
  flex-shrink: 0;
}

.library-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}

.library-tab.active {
  background: rgba(255,255,255,0.07);
  border-color: var(--accent);
  color: var(--accent);
}

.library-tab.active[data-lib="sfx"] {
  background: rgba(234,179,8,0.12);
  border-color: rgba(234,179,8,0.6);
  color: #eab308;
}

.library-content {
  overflow: hidden;
  flex: 1;
}

.lib-section { display: none; }
.lib-section.active {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
}
.lib-section.active::-webkit-scrollbar { width: 3px; }
.lib-section.active::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

/* ─── DRAGGABLE AUDIO ITEMS (liste verticale, à plat — pas de classification) ── */

.audio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 6px;
  border-radius: 8px;
  cursor: grab;
  transition: background 0.12s;
  border: 1px solid transparent;
  -webkit-app-region: no-drag;
  width: 100%;
  background: var(--elevated);
  border-color: var(--border);
}

.audio-item:hover {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.audio-item:active { cursor: grabbing; }

.audio-item-icon {
  font-size: 13px;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}

.audio-item[data-type="sfx"] .audio-item-icon {
  background: rgba(234,179,8,0.1);
  color: #eab308;
}

.audio-item-info {
  flex: 1;
  min-width: 0;
}

.audio-item-name {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
  line-height: 1.3;
}

.audio-preview-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  padding: 3px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

.audio-preview-btn:hover {
  background: rgba(255,255,255,0.09);
  color: var(--accent);
}

.audio-item-fav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-app-region: no-drag;
}

.audio-item-fav-btn svg { width: 12px; height: 12px; }

.audio-item-fav-btn:hover { background: rgba(255,255,255,0.09); color: var(--accent); }
.audio-item-fav-btn.active { color: var(--accent); }

/* ─── TRACK ROWS ─────────────────────────────────────── */

.timeline-tracks {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.timeline-tracks::-webkit-scrollbar { width: 3px; }
.timeline-tracks::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.track-row {
  display: flex;
  flex: 1;
  height: auto;
  min-height: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  align-items: stretch;
}

.track-label-col {
  width: 96px;
  flex-shrink: 0;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  border-right: 1px solid rgba(255,255,255,0.05);
}

.track-label-col span {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.volume-slider {
  width: 72px;
  height: 3px;
  -webkit-appearance: none;
  background: var(--elevated);
  border-radius: 2px;
  outline: none;
  -webkit-app-region: no-drag;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

.track-content {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 6px 8px;
  position: relative;
  min-width: 0;
}

.track-droppable {
  transition: background 0.15s;
}

.track-droppable.drag-hover {
  background: rgba(255,255,255,0.05);
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
}

.track-clip {
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  width: 100%;
  user-select: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-app-region: no-drag;
}

.video-clip {
  background: rgba(99,102,241,0.2);
  border: 1px solid rgba(99,102,241,0.3);
  color: #818cf8;
}

.music-clip {
  position: relative;
  height: 100%;
  border-radius: 0;
  background: color-mix(in srgb, #3b82f6 16%, transparent);
  border-top: 1px solid color-mix(in srgb, #3b82f6 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, #3b82f6 36%, transparent);
  border-left: 1px solid color-mix(in srgb, #3b82f6 36%, transparent);
  border-right: 1px solid color-mix(in srgb, #3b82f6 36%, transparent);
  color: var(--accent);
  width: auto;
  min-width: 60px;
  max-width: 100%;
  overflow: hidden;
  padding: 0 8px;
}

.music-clip .clip-name {
  min-width: 40px;
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

.music-clip .audio-preview-btn,
.music-clip .clip-remove-btn {
  position: relative;
  z-index: 1;
}

.clip-waveform-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.audio-volume-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
  margin-bottom: 6px;
}

.audio-volume-label {
  font-size: 11px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.audio-volume-row .volume-slider {
  flex: 1;
  width: auto;
}

.audio-volume-value {
  font-size: 11px;
  color: var(--text-muted);
  width: 30px;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.sfx-clip {
  background: rgba(234,179,8,0.2);
  border: 1px solid rgba(234,179,8,0.3);
  color: #eab308;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: grab;
  width: auto;
  min-width: 60px;
  max-width: calc(100% - 16px);
  pointer-events: auto;
}

.sfx-clip:active { cursor: grabbing; }


.track-too-short {
  opacity: 0.4;
}
.track-too-short .audio-item-category::after {
  content: ' — trop court';
  color: #ef4444;
}

.clip-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clip-remove-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 10px;
  opacity: 0.55;
  padding: 2px 3px;
  flex-shrink: 0;
  -webkit-app-region: no-drag;
}

.clip-remove-btn:hover { opacity: 1; }

.track-drop-hint {
  font-size: 11px;
  color: var(--text-muted);
  pointer-events: none;
  padding-left: 2px;
}

/* Left controls panel */
/* Largeur réglable (glisser editor-controls-resize-handle) — même mécanisme que le
   panneau Wesma AI (--wesma-panel-width), retour de Flavien : "meme fonctionement que
   Wesma Ai". Mémorisée par utilisateur (localStorage), voir initEditorControlsResize(). */
.editor-controls {
  width: var(--editor-controls-width, 280px);
  flex: 0 0 var(--editor-controls-width, 280px);
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  overflow-y: auto;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.editor-controls::-webkit-scrollbar { width: 3px; }
.editor-controls::-webkit-scrollbar-track { background: transparent; }
.editor-controls::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.editor-controls-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  position: relative;
  background: rgba(0,0,0,0.3);
  border-right: 1px solid var(--border);
  -webkit-app-region: no-drag;
}

.editor-controls-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 2px;
  width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}

.editor-controls-resize-handle:hover::after,
.editor-controls-resize-handle.dragging::after {
  background: rgba(255,255,255,0.35);
}

/* ─── WESMA AI — panneau latéral persistant ──────────── */

.wesma-panel-toggle-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-panel-toggle-btn:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.3);
}

.wesma-panel-toggle-btn.active {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
}

/* Icône seule (plus de libellé "Discussion") — homogène avec les boutons contextuels
   vod-chat-btn/editor-chat-btn (mêmes icône et style), pour ne plus avoir un gros bouton
   texte à côté d'une petite icône qui font la même chose. */
.wesma-panel-toggle-btn.icon-only {
  gap: 0;
  padding: 7px 9px;
}

/* Mode docké (défaut) — accolé au contenu courant dans .main-body, largeur réglable (voir
   .wesma-panel-resize-handle), partage vraiment l'espace horizontal (plus de position:fixed
   qui chevauchait la page). Largeur pilotée par --wesma-panel-width (JS, glisser la
   poignée) plutôt qu'un style inline direct, pour que .fullpage puisse toujours reprendre
   la main via la cascade normale (voir plus bas) sans que la largeur mémorisée ne s'applique
   par erreur en plein-écran. */
.wesma-side-panel {
  flex: 0 0 var(--wesma-panel-width, 420px);
  width: var(--wesma-panel-width, 420px);
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(14,14,14,0.88);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-left: 1px solid var(--border);
  -webkit-app-region: no-drag;
}

/* Mode plein-écran (Discussion, via navigateTo('wesma-ai')) — se comporte comme n'importe
   quel autre écran, occupe tout .main-body. */
.wesma-side-panel.fullpage {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
  border-left: none;
}

/* Poignée de redimensionnement — entre .content et le panneau docké, cachée en plein-écran
   (pas de largeur à régler quand le panneau occupe tout l'espace restant). */
.wesma-panel-resize-handle {
  flex: 0 0 6px;
  cursor: col-resize;
  position: relative;
  -webkit-app-region: no-drag;
}

.wesma-panel-resize-handle::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: transparent;
  transition: background 0.15s ease;
}

.wesma-panel-resize-handle:hover::after,
.wesma-panel-resize-handle.dragging::after {
  background: rgba(255,255,255,0.35);
}

.wesma-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.wesma-panel-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

.wesma-panel-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.wesma-panel-header-btn:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.wesma-ai-layout {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
}

/* Colonne gauche — repliable, se superpose au fil de discussion */
.wesma-convo-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 280px;
  max-width: 85%;
  flex-shrink: 0;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
  z-index: 5;
  transform: translateX(-100%);
  transition: transform 0.18s ease;
}

.wesma-convo-sidebar.open {
  transform: translateX(0);
  box-shadow: 12px 0 30px rgba(0,0,0,0.35);
}

/* Écran Discussion plein-écran (.fullpage) — largement assez de place pour garder la liste
   des conversations en permanence, comme la plupart des apps de chat : plus de popup à
   toggle, elle fait partie du flex layout normal au lieu de se superposer en position
   absolute. Le bouton toggle (hamburger) n'a plus de rôle ici, caché. Le panneau docké
   étroit (420px par défaut, depuis l'éditeur) garde lui le comportement overlay/toggle —
   pas la place pour une colonne fixe de 280px en plus du fil de discussion. */
.wesma-side-panel.fullpage .wesma-convo-sidebar {
  position: relative;
  transform: none;
  flex-shrink: 0;
}

.wesma-side-panel.fullpage #wesma-convo-sidebar-toggle {
  display: none;
}

/* Le "X" fermait la page Discussion en te renvoyant à l'Accueil — surprenant pour un
   simple bouton "Fermer" sur ce qui est maintenant une page à part entière (au même titre
   qu'Éditeur ou Analyse vidéo, navigable depuis la sidebar). Masqué en plein-écran ; reste
   affiché en mode docké (Éditeur/Analyse vidéo), où il ferme vraiment le panneau latéral. */
.wesma-side-panel.fullpage #wesma-panel-close-btn {
  display: none;
}

.wesma-new-convo-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  color: white;
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-new-convo-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
}

.wesma-convo-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wesma-convo-list::-webkit-scrollbar { width: 3px; }
.wesma-convo-list::-webkit-scrollbar-track { background: transparent; }
.wesma-convo-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.wesma-convo-empty {
  color: rgba(255,255,255,0.35);
  font-size: 12px;
  font-style: italic;
  padding: 8px 4px;
  margin: 0;
}

.wesma-convo-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
  padding: 10px 12px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-convo-item:hover {
  background: rgba(255,255,255,0.06);
  color: white;
}

.wesma-convo-item.active {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.18);
  color: white;
  font-weight: 600;
}

/* ── Recherche ── */
.wesma-convo-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 10px;
  color: rgba(255,255,255,0.35);
  -webkit-app-region: no-drag;
}

.wesma-convo-search-wrap:focus-within {
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.6);
}

/* #wesma-convo-search (ID) — la règle globale "input:not([type=...])" (plus haut dans le
   fichier) a une spécificité supérieure à une simple classe et écrasait le fond transparent
   avec le style de carte par défaut (fond + bordure), donnant l'impression d'une "boîte dans
   la boîte" dans la barre de recherche. L'ID passe au-dessus sans dépendre de l'ordre. */
.wesma-convo-search,
#wesma-convo-search {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  color: white;
  font-size: 12.5px;
}

#wesma-convo-search:focus {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.wesma-convo-search::placeholder {
  color: rgba(255,255,255,0.35);
}

/* ── Sections + ligne (item + kebab) ── */
.wesma-convo-section-label {
  margin: 12px 4px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.35);
}

.wesma-convo-section-label:first-child {
  margin-top: 4px;
}

.wesma-convo-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.wesma-convo-row .wesma-convo-item {
  flex: 1;
  min-width: 0;
}

.wesma-convo-kebab {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.1s ease, background 0.1s ease;
  -webkit-app-region: no-drag;
}

.wesma-convo-row:hover .wesma-convo-kebab,
.wesma-convo-row.active .wesma-convo-kebab {
  opacity: 1;
}

.wesma-convo-kebab:hover {
  background: rgba(255,255,255,0.12);
  color: white;
}

.wesma-convo-pin-dot {
  font-size: 10px;
  margin-right: 4px;
}

.wesma-convo-project-tag {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
}

.wesma-convo-archived-toggle {
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.4);
  font-size: 11.5px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.wesma-convo-archived-toggle:hover {
  color: rgba(255,255,255,0.7);
}

/* ── Renommage inline ── */
.wesma-convo-rename-input {
  width: 100%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  color: white;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 12px;
  outline: none;
}

/* ── Menu contextuel (kebab) — positionné en fixed, ajouté à document.body ── */
.wesma-convo-menu {
  position: fixed;
  z-index: 400;
  min-width: 190px;
  background: #1c1c22;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.wesma-convo-menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.wesma-convo-menu button:hover {
  background: rgba(255,255,255,0.1);
}

.wesma-convo-menu-danger {
  color: #ef4444 !important;
}

.wesma-convo-menu-back {
  color: rgba(255,255,255,0.5) !important;
  font-size: 11.5px !important;
}

.wesma-convo-menu-sep {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 4px 2px;
}

.wesma-convo-menu-loading {
  margin: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}

/* Toast — remplace alert() natif, notice non-bloquante auto-dismiss */
#wesma-toast-container {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.wesma-toast {
  background: #1c1c22;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 360px;
  text-align: center;
}

.wesma-toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.wesma-toast-danger {
  border-color: rgba(239,68,68,0.35);
  color: #fca5a5;
}

/* Modal — remplace confirm() natif, confirmation bloquante dans le thème glass sombre */
.wesma-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wesma-modal {
  width: 320px;
  background: #1c1c22;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.wesma-modal-message {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

.wesma-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.wesma-modal-actions button {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.wesma-modal-cancel {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}

.wesma-modal-cancel:hover {
  background: rgba(255,255,255,0.14);
}

.wesma-modal-confirm {
  background: rgba(255,255,255,0.9);
  color: #1c1c22;
}

.wesma-modal-confirm:hover {
  background: #fff;
}

.wesma-modal-confirm-danger {
  background: #ef4444;
  color: #fff;
}

.wesma-modal-confirm-danger:hover {
  background: #dc2626;
}

/* Zone centrale — thread + input */
.wesma-chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.wesma-thread {
  flex: 1;
  overflow-y: auto;
  padding: 32px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wesma-thread::-webkit-scrollbar { width: 4px; }
.wesma-thread::-webkit-scrollbar-track { background: transparent; }
.wesma-thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.wesma-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
}

.wesma-thread-empty-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

.wesma-thread-empty-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin: 0;
  max-width: 320px;
}

.wesma-suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 480px;
  margin-top: 14px;
}

.wesma-bubble-row {
  display: flex;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 2px; /* redondant avec le gap du parent — filet de sécurité */
}

.wesma-bubble-row.user      { justify-content: flex-end; }
.wesma-bubble-row.assistant { justify-content: flex-start; }
.wesma-bubble-row.system    { justify-content: center; }

.wesma-bubble {
  max-width: min(640px, 78%);
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.wesma-bubble.user {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  border-bottom-right-radius: 4px;
}

.wesma-bubble.assistant {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.9);
  border-bottom-left-radius: 4px;
}

.wesma-bubble.system {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.45);
  font-style: italic;
  font-size: 12.5px;
  text-align: center;
  max-width: 480px;
}

/* ── Choix cliquables — [[CHOIX: ...]], voir wesmaSystemPrompt.js ─────────────── */

.wesma-bubble-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(640px, 78%);
}

.wesma-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wesma-choice-btn {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: white;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-choice-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.32);
}

/* ── Carte de confirmation d'action agent — voir agentCommands.js / confirmWesmaToolCalls ── */

.wesma-tool-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px 16px;
}

.wesma-tool-action {
  font-size: 13px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
}

.wesma-tool-action::before {
  content: "→ ";
  color: rgba(255,255,255,0.4);
}

.wesma-tool-controls {
  display: flex;
  gap: 8px;
}

.wesma-tool-confirm-btn,
.wesma-tool-cancel-btn {
  flex: 1;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-tool-confirm-btn {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.9);
  color: #111;
}

.wesma-tool-confirm-btn:hover {
  background: #fff;
}

.wesma-tool-cancel-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
}

.wesma-tool-cancel-btn:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

.wesma-tool-status {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

.wesma-tool-status.done {
  color: rgba(120,220,150,0.85);
}

.wesma-tool-status.cancelled {
  color: rgba(255,255,255,0.4);
}

/* ── Bulle "en attente" — typing dots + statut d'activité (scaffolding tools) ── */

.wesma-bubble.pending {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 20px;
}

.wesma-activity-status {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

.wesma-typing-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* display:flex ci-dessus court-circuiterait [hidden] (règle native, faible priorité) —
   override explicite nécessaire pour que .hidden=true masque vraiment l'élément. */
.wesma-typing-dots[hidden],
.wesma-activity-status[hidden] { display: none; }

.wesma-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  animation: wesmaTypingBounce 1.2s infinite ease-in-out;
}

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

@keyframes wesmaTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.wesma-input-bar {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  padding: 12px 24px 24px;
}

.wesma-input-col {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wesma-disclaimer {
  margin: 0;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: color 0.15s ease;
}

/* ── Sélecteur "Mode" — Toujours demander / Accepter automatiquement (voir wesmaChat.js) ── */
.wesma-mode-row {
  display: flex;
  justify-content: center;
}

.wesma-mode-wrap {
  position: relative;
}

.wesma-mode-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-mode-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.85);
  border-color: rgba(255,255,255,0.18);
}

.wesma-mode-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 260px;
  background: rgba(24,24,24,0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 40;
}

.wesma-mode-menu button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 9px 10px;
  cursor: pointer;
  transition: background 0.12s ease;
  -webkit-app-region: no-drag;
}

.wesma-mode-menu button:hover {
  background: rgba(255,255,255,0.07);
}

.wesma-mode-menu button.active {
  background: rgba(255,255,255,0.1);
}

.wesma-mode-menu-title {
  font-size: 12.5px;
  font-weight: 600;
  color: white;
}

.wesma-mode-menu button.active .wesma-mode-menu-title::after {
  content: " ✓";
  color: rgba(120,220,150,0.9);
}

.wesma-mode-menu-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  line-height: 1.35;
}

.wesma-disclaimer:hover {
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
}

.wesma-ratelimit-banner[hidden] {
  display: none;
}

.wesma-ratelimit-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  color: #f59e0b;
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
}

.wesma-input-inner {
  width: 100%;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 12px 12px 12px 18px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wesma-input-inner:focus-within {
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 8px 30px rgba(0,0,0,0.28), 0 0 0 3px rgba(255,255,255,0.05);
}

.wesma-chat-input:disabled {
  opacity: 0.4;
  cursor: default;
}

.wesma-chat-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none;
  resize: none;
  color: white;
  font-family: var(--font-text);
  font-size: 13.5px;
  line-height: 1.5;
  max-height: 160px;
  padding: 6px 0;
}

.wesma-chat-input:focus {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.wesma-chat-input::placeholder {
  color: rgba(255,255,255,0.35);
}

.wesma-send-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.18);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.wesma-send-btn:hover { background: rgba(255,255,255,0.28); }
.wesma-send-btn:disabled { opacity: 0.5; cursor: default; }

/* Point 7 — bouton "+" (joindre image / épingler projet), style Claude/ChatGPT */
.wesma-attach-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
  position: relative;
}
.wesma-attach-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.wesma-attach-btn:disabled { opacity: 0.4; cursor: default; }

.wesma-attach-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(28,28,32,0.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  z-index: 20;
  min-width: 190px;
}
.wesma-attach-menu.hidden { display: none; }
.wesma-attach-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.85);
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  -webkit-app-region: no-drag;
}
.wesma-attach-menu button:hover { background: rgba(255,255,255,0.08); color: white; }

.wesma-attachment-preview.hidden { display: none; }
.wesma-attachment-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
}
.wesma-attachment-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
.wesma-attachment-preview .wesma-attach-pin {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.6);
}
.wesma-attachment-preview-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wesma-attachment-preview-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  -webkit-app-region: no-drag;
}
.wesma-attachment-preview-remove:hover { color: white; }

/* Bulle avec image jointe (côté utilisateur) */
.wesma-bubble-image {
  max-width: 220px;
  border-radius: 12px;
  display: block;
  margin-bottom: 6px;
}

/* Right preview panel */
.editor-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start + overflow:auto (pas center + hidden) — avec justify-content:center, un
     aperçu zoomé plus grand que le panneau se faisait couper symétriquement en haut ET en
     bas, ce qui emportait la barre de zoom (+/−) elle-même hors champ : plus aucun moyen de
     dézoomer une fois trop zoomé (retour de Flavien : "grossir encore plus"). La barre de
     zoom reste maintenant toujours le premier élément visible ; .canvas-container se centre
     lui-même dans l'espace restant via ses marges auto (voir plus bas), et devient
     défilable plutôt que coupé quand il dépasse. */
  justify-content: flex-start;
  padding: 12px 16px;
  overflow: auto;
  height: 100%;
  background: var(--main-bg);
}

/* ─── DROP ZONE ──────────────────────────────────────── */

#drop-zone {
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  text-align: center;
  margin-bottom: 4px;
}

.drop-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 12px;
}

#browse-btn {
  background: #ffffff;
  color: #0A0A0A;
  border: none;
  border-radius: var(--radius);
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-app-region: no-drag;
}

#browse-btn:hover {
  opacity: 0.85;
}

.video-track-select-btn {
  background: #ffffff;
  color: #0A0A0A;
  border: none;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  -webkit-app-region: no-drag;
  flex-shrink: 0;
}

.video-track-select-btn:hover {
  opacity: 0.82;
}

.video-track-select-btn.hidden {
  display: none;
}

#browse-btn:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

/* ─── VIDEO INFO ─────────────────────────────────────── */

#video-info { margin-bottom: 4px; }

.info-thumb {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--elevated);
  aspect-ratio: 16/9;
  margin-bottom: 10px;
}

#info-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.info-meta { margin-bottom: 10px; }

.info-filename {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.info-stat {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

#change-video-btn {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  width: 100%;
  -webkit-app-region: no-drag;
}

#change-video-btn:hover {
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

/* ─── DIVIDER ────────────────────────────────────────── */

.divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

/* ─── CONTROLS ───────────────────────────────────────── */

.controls { flex: 1; }

.control-group { margin-bottom: 20px; }

.control-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.control-header label {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.control-header span {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--fill-pct, 0%),
    #2a2a2a var(--fill-pct, 0%),
    #2a2a2a 100%
  );
  outline: none;
  cursor: pointer;
  margin-bottom: 5px;
  transition: background 0.15s ease;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.15);
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 1px 6px rgba(0,0,0,0.5), 0 0 0 3px rgba(255,255,255,0.25);
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ─── EXPORT SECTION ─────────────────────────────────── */

/* ─── TIMELINE TOPBAR ────────────────────────────────── */

.timeline-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 38px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(0,0,0,0.2);
}

.timeline-topbar-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#export-btn {
  background: rgba(255,255,255,0.12);
  color: white;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  -webkit-app-region: no-drag;
  white-space: nowrap;
}

#export-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.35);
}

#export-btn:active:not(:disabled) {
  background: rgba(255,255,255,0.1);
}

#export-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.export-sub {
  font-size: 10.5px;
  color: var(--text-muted);
}

/* ─── ACCORDION ──────────────────────────────────────── */

.accordion-group {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.accordion-group:last-child {
  border-bottom: none;
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  -webkit-app-region: no-drag;
  text-align: left;
}

.accordion-header:hover {
  color: white;
}

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

.accordion-group.open .acc-chevron {
  transform: rotate(180deg);
}

.accordion-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease, padding 0.25s ease;
  padding-bottom: 0;
}

.accordion-group.open .accordion-body {
  max-height: 600px;
  padding-bottom: 8px;
}

/* ─── CAPTION SUGGESTIONS ────────────────────────────── */

.caption-chip {
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  -webkit-app-region: no-drag;
  line-height: 1.4;
}

.caption-chip:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  color: white;
}

/* ─── PREVIEW ────────────────────────────────────────── */

.preview-zoom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
  flex-shrink: 0;
  gap: 8px;
}

.preview-label {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-weight: 500;
  white-space: nowrap;
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 6px;
}

.zoom-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 5px;
  border-radius: 4px;
  transition: all 0.12s;
  -webkit-app-region: no-drag;
  line-height: 1;
}

.zoom-btn:hover {
  background: var(--card-bg);
  color: var(--text-primary);
}

.zoom-fit {
  font-size: 11px;
  border-left: 1px solid var(--border);
  margin-left: 3px;
  padding-left: 7px;
}

#zoom-level {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.preview-badge {
  background: var(--elevated);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid var(--border);
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

.canvas-container {
  position: relative;
  /* width/height driven by applyZoom() JS */
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #0a0a0a;
  flex-shrink: 0;
  /* Centre l'aperçu dans l'espace libre sous la barre de zoom quand il y en a — se réduit
     à 0 (donc s'aligne juste sous la barre, défilable) si l'aperçu zoomé dépasse l'espace
     disponible, au lieu d'être coupé symétriquement par .editor-preview. */
  margin: auto 0;
  transition: width 0.15s ease, height 0.15s ease;
}

#preview-canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* Zoom (applyZoom() dans renderer.js) — scale() centré, recadré par le overflow:hidden
     de .canvas-container juste en dessous, pour un vrai zoom sur le contenu plutôt qu'un
     agrandissement de la boîte d'aperçu elle-même. */
  transform-origin: center center;
  transition: transform 0.15s ease;
}

#preview-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: var(--text-muted);
  font-size: 12.5px;
  text-align: center;
  padding: 20px;
}

.placeholder-icon {
  font-size: 28px;
  opacity: 0.25;
}

/* ─── PLAYBACK CONTROLS ──────────────────────────────── */

.playback-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  width: 100%;
  flex-shrink: 0;
}

.playback-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #0A0A0A;
  transition: background 0.15s;
}

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

.playback-time {
  font-size: 11.5px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  color: var(--text-muted);
}

#volume-slider {
  -webkit-appearance: none;
  width: 80px;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  outline: none;
  cursor: pointer;
}

#volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* ─── PROGRESS ───────────────────────────────────────── */

@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.45; }
}

#progress-section {
  width: 100%;
  max-width: 380px;
  margin-top: 18px;
}

.progress-bar-bg {
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 8px;
}

#progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(255,255,255,0.7) 40%, var(--accent) 60%, var(--accent) 100%);
  background-size: 200% 100%;
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
  animation: shimmer 1.8s linear infinite;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

#progress-percent.pulsing {
  animation: pulse-text 1.2s ease infinite;
  color: var(--accent);
}

#progress-status {
  font-size: 11.5px;
  color: var(--text-muted);
  text-align: center;
}

/* ─── EXPORT DONE ────────────────────────────────────── */

#export-done-section {
  width: 100%;
  max-width: 380px;
  margin-top: 18px;
  text-align: center;
}

.done-icon {
  font-size: 36px;
  color: var(--success);
  margin-bottom: 10px;
}

.done-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.done-filename {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
  word-break: break-all;
}

.done-actions {
  display: flex;
  gap: 9px;
  justify-content: center;
}

.done-actions button {
  background: var(--elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  -webkit-app-region: no-drag;
}

.done-actions button:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary);
}

#open-folder-btn {
  background: rgba(255,255,255,0.1) !important;
  color: white !important;
  border-color: transparent !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease, filter 0.15s ease !important;
}

#open-folder-btn:hover {
  box-shadow: none !important;
  filter: brightness(1.1) !important;
}

/* ─── BIBLIOTHÈQUE AUDIO SCREEN ─────────────────────── */

.audio-lib-layout {
  display: flex;
  gap: 20px;
  height: calc(100vh - 180px);
}

.audio-lib-music,
.audio-lib-sfx {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.1);
}

.audio-lib-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.lib-music-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.lib-music-content::-webkit-scrollbar { width: 4px; }
.lib-music-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.lib-card-dur {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.lib-play-btn,
.lib-icon-btn {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 10px;
  flex-shrink: 0;
  transition: all 0.12s;
  -webkit-app-region: no-drag;
}

.lib-play-btn svg,
.lib-icon-btn svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}

.lib-play-btn:hover,
.lib-icon-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.lib-icon-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.lib-icon-btn.danger:hover {
  background: #e5484d;
  border-color: #e5484d;
  color: white;
}

.lib-add-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-app-region: no-drag;
  white-space: nowrap;
}

.lib-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.lib-sfx-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 0;
}

.lib-sfx-list::-webkit-scrollbar { width: 4px; }
.lib-sfx-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.lib-sfx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: border-color 0.12s;
}

.lib-sfx-row:hover { border-color: var(--border-strong); }

.lib-sfx-name {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.lib-sfx-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ─── CONNECT SCREENS (TWITCH / YOUTUBE) ─────────────── */

.connect-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  gap: 18px;
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}

.connect-logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.twitch-logo { background: rgba(145,71,255,0.12); }
.youtube-logo { background: rgba(255,0,0,0.1); }

.connect-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 380px;
  line-height: 1.6;
}

.twitch-btn {
  background: #9147ff;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  -webkit-app-region: no-drag;
}

.twitch-btn:hover { background: #7d2ff7; }

.youtube-btn {
  background: #ff0000;
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  -webkit-app-region: no-drag;
}

.youtube-btn:hover { background: #cc0000; }

.connect-features {
  list-style: none;
  text-align: left;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.connect-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.connect-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,0.09);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0;
}

.connect-note {
  font-size: 11.5px;
  color: var(--text-muted);
  font-style: italic;
}

.connect-step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.channel-input {
  width: 100%;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  outline: none;
  -webkit-app-region: no-drag;
  box-sizing: border-box;
}

.channel-input:focus { border-color: var(--accent); }

.connect-back-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.connect-back-btn:hover { color: var(--text-primary); }

.connected-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}

.connected-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
}

.connected-channel {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.connect-disconnect-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-app-region: no-drag;
}

.connect-disconnect-btn:hover { border-color: #ef4444; color: #ef4444; }

/* ─── MON PLAN SCREEN ────────────────────────────────── */

.current-plan-card {
  background: var(--accent-dim);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  gap: 20px;
}

.current-plan-left { display: flex; flex-direction: column; gap: 6px; }

.current-plan-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
}

.current-plan-name {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
}

.current-plan-since {
  font-size: 12px;
  color: var(--text-muted);
}

.current-plan-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #22c55e;
  font-weight: 600;
}

.current-plan-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.current-plan-price {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
}

.btn-manage-plan {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.12s;
  -webkit-app-region: no-drag;
}

.btn-manage-plan:hover { border-color: var(--border-strong); color: var(--text-primary); }

.btn-cancel-plan {
  background: transparent;
  border: none;
  color: #ef4444;
  font-size: 11px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.plan-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.plan-card-current {
  border-color: rgba(255,255,255,0.25);
  background: var(--accent-dim);
}

.plan-current-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}

.plan-card-name {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-primary);
}

.plan-card-price {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
}

.plan-card-price span {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
}

.plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.plan-feature {
  font-size: 12.5px;
}

.plan-feature.on { color: var(--text-secondary); }
.plan-feature.off { color: var(--text-muted); opacity: 0.5; }

.plan-upgrade-btn {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
  width: 100%;
}

.plan-upgrade-btn:hover:not(:disabled) { filter: brightness(1.1); }
.plan-upgrade-btn:disabled {
  background: var(--elevated);
  color: var(--text-muted);
  cursor: default;
}

/* ─── AIDE & SUPPORT SCREEN ──────────────────────────── */

.aide-search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 28px;
  color: var(--text-muted);
}

.aide-search-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  flex: 1;
  -webkit-app-region: no-drag;
}

.aide-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.aide-heading {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq-item {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  -webkit-app-region: no-drag;
  gap: 10px;
}

.faq-arrow {
  font-size: 9px;
  color: var(--text-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}

.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-item.open { border-color: var(--border-strong); }

.faq-answer {
  display: none;
  padding: 0 16px 14px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.faq-item.open .faq-answer { display: block; }

.contact-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-card-icon {
  color: var(--accent);
  margin-bottom: 2px;
}

.contact-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.contact-card-desc {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.contact-btn {
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 7px;
  padding: 7px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
  text-align: center;
  -webkit-app-region: no-drag;
}

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

/* ─── COMING SOON ───────────────────────────────────── */

.coming-soon-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60vh;
  text-align: center;
  gap: 16px;
}

.hourglass {
  font-size: 48px;
  animation: spin 2s ease-in-out infinite alternate;
}

@keyframes spin {
  0%   { transform: rotate(0deg); opacity: 0.5; }
  100% { transform: rotate(180deg); opacity: 1; }
}

.cs-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
}

.cs-desc {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
}

.cs-badge {
  background: var(--accent-dim);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--accent);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* ─── HOME HERO BANNER ───────────────────────────────── */

.home-hero {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
  background: #111;
  border: 1px solid var(--border);
}

#home-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: blur(3px) brightness(0.7);
  transform: scale(1.05);
}

.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.85) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  padding: 32px;
  gap: 12px;
}

.hero-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
}

.hero-title {
  font-size: 28px;
  font-weight: 800;
  color: white;
  letter-spacing: -0.5px;
  text-align: right;
  max-width: 400px;
  line-height: 1.2;
}

.hero-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  text-align: right;
  max-width: 360px;
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.hero-btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}

.hero-btn-primary:hover { filter: brightness(1.1); }

.hero-btn-secondary {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-app-region: no-drag;
}

.hero-btn-secondary:hover { background: rgba(255,255,255,0.08); }

/* ─── FEATURE CARDS ──────────────────────────────────── */

.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}

.feature-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  transition: all 0.15s;
}

.feature-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.feature-img-area {
  width: 100%;
  height: 140px;
  background: var(--elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.feature-img-area.drop-hover {
  outline: 2px dashed var(--accent);
  background: rgba(255,255,255,0.04);
}

.feature-img-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}

.feature-img-placeholder {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  pointer-events: none;
}

.feature-card-body { padding: 16px; }

.feature-card-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.feature-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}

.feature-stat { display: flex; align-items: baseline; gap: 6px; }

.feature-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--accent);
}

.feature-stat-label {
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── SECTION TITLE ─────────────────────────────────── */

.section-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 14px;
  margin-top: 32px;
}

/* ─── QUICK START CARDS ──────────────────────────────── */

.quick-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.quick-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 0.15s, box-shadow 0.15s;
}

.quick-card:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.quick-card-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

.quick-card-desc {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  flex: 1;
}

.quick-card .btn-sm {
  margin-top: 10px;
  align-self: flex-start;
}

/* ─── ACTIVITY SECTION ───────────────────────────────── */

.activity-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.activity-empty {
  padding: 22px 18px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s;
}

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

.activity-item:hover { background: rgba(255,255,255,0.03); }

.activity-thumb {
  width: 36px;
  height: 64px;
  background: var(--elevated);
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-muted);
}

.activity-info { flex: 1; min-width: 0; }

.activity-filename {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.activity-date {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

/* ─── CLIPS GRID ─────────────────────────────────────── */

.clips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.clip-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  transition: all 0.15s;
}

.clip-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.clip-card-thumb {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-muted);
  opacity: 0.4;
}

.clip-card-info {
  padding: 12px 14px;
}

.clip-card-name {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.clip-card-meta {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ─── CAPTION IA ─────────────────────────────────────── */

.caption-section {
  margin-top: 4px;
}

.caption-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.caption-title {
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.caption-status {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.caption-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.caption-choice {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-app-region: no-drag;
}

.caption-choice:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.caption-choice.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.caption-choice-text {
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.caption-choice-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.caption-choice-score {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  flex-shrink: 0;
}

.caption-choice-why {
  font-family: var(--font-text);
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  text-align: right;
}

.caption-selected {
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

#caption-selected-text {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  text-align: center;
}

.caption-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ─── CHECKBOXES ─────────────────────────────────────── */

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.checkbox:hover {
  border-color: var(--accent);
}

.checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkbox.checked::after {
  content: '';
  width: 9px;
  height: 6px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(-45deg) translateY(-1px);
  display: block;
}

.checkbox-label {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
}

.checkbox-description {
  font-family: var(--font-text);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--text-muted);
  margin-top: 2px;
}

.checkbox-field {
  display: flex;
  flex-direction: column;
}

/* ─── TABS ───────────────────────────────────────────── */

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

.tabs-list {
  display: inline-flex;
  align-items: center;
  background: var(--elevated);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  margin-bottom: 24px;
}

.tab-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  -webkit-app-region: no-drag;
}

.tab-trigger:hover {
  color: var(--text-secondary);
}

.tab-trigger.active {
  background: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn 0.15s ease;
}

/* ─── SETTINGS INPUT ─────────────────────────────────── */

.settings-input {
  background: var(--elevated);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: 'SF Mono', 'Menlo', monospace;
  font-size: 12px;
  color: var(--text-muted);
  width: 200px;
  outline: none;
  transition: border-color 0.15s ease;
}

.settings-input:focus {
  border-color: var(--accent);
  color: var(--text-secondary);
}

/* ─── CALENDAR ───────────────────────────────────────── */

.cal-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.cal-nav button {
  background: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-primary);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
  -webkit-app-region: no-drag;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-nav button:hover { background: var(--elevated); }

#cal-month-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  min-width: 150px;
  text-align: center;
}

.cal-grid {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  max-width: 700px;
}

.cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--elevated);
  border-bottom: 1px solid var(--border);
}

.cal-header span {
  text-align: center;
  padding: 10px;
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 4px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s ease;
  position: relative;
  -webkit-app-region: no-drag;
  min-height: 0;
}

.cal-day:nth-child(7n) { border-right: none; }

.cal-day:hover { background: var(--elevated); }

.cal-day.today .cal-day-num {
  background: var(--accent);
  color: white;
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.cal-day.selected { background: rgba(255,255,255,0.05); }

.cal-day.selected .cal-day-num {
  color: var(--accent);
  font-weight: 700;
}

.cal-day.today.selected .cal-day-num {
  background: var(--accent);
  color: white;
}

.cal-day.other-month .cal-day-num { color: var(--text-muted); }

.cal-day-num {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1;
}

.cal-dot-row {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
}

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

.cal-selected-day {
  max-width: 700px;
}

.cal-day-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.cal-day-clips {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.cal-empty {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--text-muted);
}

.cal-clip-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  transition: border-color 0.15s ease;
}

.cal-clip-card:hover { border-color: var(--border-strong); }

.cal-clip-info { flex: 1; min-width: 0; }

.cal-clip-name {
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-clip-time {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-muted);
}

.cal-clip-badge {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(255,255,255,0.07);
  color: var(--accent);
  border: 1px solid rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* ─── CAROUSEL ───────────────────────────────────────── */

.carousel-section {
  margin: 32px 0 8px;
}

.carousel-header {
  margin-bottom: 20px;
}

.carousel-heading {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.carousel-subheading {
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.carousel-outer {
  width: 630px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 7%, black 93%, transparent 100%);
}

.carousel-track {
  display: flex;
  gap: 20px;
  will-change: transform;
  transform: translateX(0);
}

/* ─── PHONE MOCKUP ───────────────────────────────────── */

.phone-mockup {
  width: 190px;
  flex-shrink: 0;
}

.phone-frame {
  width: 190px;
  aspect-ratio: 9 / 19.5;
  background: #0c0c0c;
  border: 3px solid #252525;
  border-radius: 38px;
  padding: 14px 10px 12px;
  position: relative;
  box-shadow:
    0 24px 48px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

.phone-island {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 14px;
  background: #000;
  border: 1px solid #1c1c1c;
  border-radius: 20px;
  z-index: 3;
}

.phone-screen {
  width: 100%;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #050505;
  position: relative;
}

.phone-video-area {
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at 50% 40%, #0a0f1a 0%, #050505 65%);
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.phone-video-area::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 35%, rgba(255,255,255,0.05) 0%, transparent 65%);
  pointer-events: none;
}

.phone-play {
  font-size: 20px;
  color: rgba(255,255,255,0.12);
  position: relative;
  z-index: 1;
}

.phone-caption-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 28px 11px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 55%, transparent 100%);
  z-index: 2;
}

.phone-caption-text {
  font-family: var(--font-text);
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  line-height: 1.45;
  display: block;
  text-align: center;
  letter-spacing: 0.01em;
}

.phone-watermark {
  position: absolute;
  top: 18px;
  right: 10px;
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.03em;
  z-index: 3;
}

/* ─── TWITCH CONNECTED HEADER ────────────────────────── */

.twitch-user-header {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card-bg);
  border: 1px solid rgba(145,71,255,0.2);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  max-width: 700px;
}

.twitch-user-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid #9147ff;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--elevated);
}

.twitch-user-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.twitch-user-badge {
  font-size: 12px;
  color: var(--success);
  font-weight: 500;
}

/* ─── LIVE BANNER ────────────────────────────────────── */

.live-banner {
  background: linear-gradient(90deg, rgba(145,71,255,0.18) 0%, rgba(255,255,255,0.08) 100%);
  border-bottom: 1px solid rgba(145,71,255,0.28);
  padding: 8px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  flex-shrink: 0;
  animation: banner-slide-in 0.3s ease;
}

@keyframes banner-slide-in {
  from { opacity: 0; transform: translateY(-100%); }
  to   { opacity: 1; transform: translateY(0); }
}

.live-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.live-banner-dot {
  color: #9147ff;
  font-weight: 700;
  font-size: 13px;
  animation: pulse-text 1.5s ease-in-out infinite;
}

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

.live-banner-text {
  color: var(--text-primary);
}

.live-banner-btn {
  background: rgba(145,71,255,0.18);
  border: 1px solid rgba(145,71,255,0.3);
  color: #fff;
  border-radius: var(--radius);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.live-banner-btn:hover { background: rgba(145,71,255,0.3); }

/* ─── NAV LIVE DOT ───────────────────────────────────── */

.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  margin-left: auto;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(255,255,255,0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ─── TWITCH / YOUTUBE CLIP CARDS ────────────────────── */

.twitch-clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.twitch-clip-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.twitch-clip-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.twitch-clip-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #0a0a0a;
  overflow: hidden;
}

.twitch-clip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.twitch-clip-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.twitch-clip-info {
  padding: 10px 12px;
}

.twitch-clip-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.twitch-clip-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.twitch-clip-actions {
  display: flex;
  gap: 6px;
}

/* ─── DÉTECTION AUTOMATIQUE ──────────────────────────── */

.detection-status-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 18px 20px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.detection-status-card.det-card-active {
  border-color: rgba(34,197,94,0.3);
  box-shadow: 0 0 20px rgba(34,197,94,0.06);
}

.det-indicator {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.det-indicator.det-active {
  background: #ffffff;
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 8px rgba(255,255,255,0.6); }
  50%       { box-shadow: 0 0 16px rgba(255,255,255,0.9); }
}

.det-status-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.det-status-sub {
  font-size: 12px;
  color: var(--text-secondary);
}

.btn-danger {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.25);
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

.triggers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.trigger-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 14px 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.trigger-card:hover { border-color: var(--border-strong); background: var(--elevated); }

.trigger-card input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}

.trigger-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.trigger-desc {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ─── AUTO-POST ───────────────────────────────────────── */

.accounts-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.account-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 14px 18px;
}

.account-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tiktok-icon  { background: rgba(0,0,0,0.4); color: #fff; border: 1px solid rgba(255,255,255,0.1); }
.instagram-icon { background: linear-gradient(135deg,#833ab4,#fd1d1d,#fcb045); color: #fff; }
.youtube-icon   { background: rgba(255,0,0,0.15); color: #ff0000; border: 1px solid rgba(255,0,0,0.2); }

.account-info { flex: 1; }

.account-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.account-status {
  font-size: 11px;
}

.account-status.disconnected { color: var(--text-muted); }
.account-status.connected { color: var(--success); }

.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;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(16px); }

.settings-input {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 12px;
  padding: 6px 10px;
  width: 220px;
  outline: none;
}
.settings-input:focus { border-color: var(--accent); }

/* ─── PERFORMANCE ─────────────────────────────────────── */

.connect-cta-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--accent-dim);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin-top: 16px;
}

.connect-cta-icon {
  width: 48px;
  height: 48px;
  background: rgba(255,255,255,0.09);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
}

.connect-cta-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.connect-cta-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.insight-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 8px;
}

.insight-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.insight-emoji {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}

.insight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.insight-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ─── TENDANCES ───────────────────────────────────────── */

.trend-chart-section {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 10px;
}

.trend-chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.trend-bars { display: flex; flex-direction: column; gap: 10px; }

.trend-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.trend-label {
  font-size: 12px;
  color: var(--text-secondary);
  width: 90px;
  flex-shrink: 0;
}

.trend-bar-bg {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}

.trend-bar {
  height: 100%;
  border-radius: 4px;
  background: rgba(255,255,255,0.28);
  transition: width 0.4s ease;
}

.trend-value {
  font-size: 12px;
  color: var(--text-secondary);
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

/* ─── MEILLEURS MOMENTS ───────────────────────────────── */

.moment-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 12px 16px;
  margin-bottom: 8px;
}

.moment-rank {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  width: 28px;
  flex-shrink: 0;
  text-align: center;
}

.moment-thumbnail {
  width: 36px;
  height: 36px;
  background: var(--elevated);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.moment-info { flex: 1; min-width: 0; }

.moment-caption {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moment-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.moment-stats {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.moment-stat-pill {
  font-size: 11px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  color: var(--text-secondary);
}

/* ─── RAPPORT HEBDO ───────────────────────────────────── */

.rapport-week-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.rapport-week-label {
  font-size: 13px;
  color: var(--text-secondary);
}

.btn-icon-sm {
  width: 28px;
  height: 28px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.btn-icon-sm:hover { background: rgba(255,255,255,0.1); }

.activity-chart {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-top: 8px;
}

.activity-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 120px;
}

.activity-bar-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  gap: 4px;
}

.activity-bar-wrap {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: flex-end;
}

.activity-bar-fill {
  width: 100%;
  min-height: 4px;
  background: rgba(255,255,255,0.28);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}

.activity-bar-fill.today {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,255,255,0.25);
}

.activity-bar-label {
  font-size: 11px;
  color: var(--text-secondary);
}

.activity-bar-label.today {
  color: var(--accent);
  font-weight: 600;
}

.activity-bar-count {
  font-size: 10px;
  color: var(--text-muted);
}

/* ─── SETTINGS SELECT & SHARED HELPERS ───────────────── */

.settings-select {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: 12px;
  padding: 5px 10px;
  outline: none;
  cursor: pointer;
}

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

/* ─── VOD ANALYSE SCREEN ─────────────────────────────── */

.vod-drop-zone {
  border: 2px dashed rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 600px;
  margin: 0 auto 24px;
  -webkit-app-region: no-drag;
}

.vod-drop-zone:hover,
.vod-drop-zone.drag-over {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.25);
}

.vod-drop-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.vod-drop-sub {
  font-size: 13px;
  color: var(--text-muted);
}

.vod-plan-info {
  max-width: 600px;
  margin: 0 auto;
}

.plan-limit-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.plan-limit-icon { font-size: 20px; }

.plan-limit-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.plan-limit-desc {
  font-size: 12px;
  color: var(--text-muted);
}

.plan-limit-usage {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.vod-analyzing-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  padding: 24px;
  max-width: 700px;
}

.vod-info-row {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.vod-thumb-preview {
  width: 160px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--elevated);
  flex-shrink: 0;
}

.vod-info-details { flex: 1; min-width: 0; } /* min-width:0 nécessaire pour qu'un enfant flex:1 accepte de rétrécir sous sa largeur intrinsèque — sans ça, le texte long pousse hors de la carte au lieu d'être contraint par .vod-info-name ci-dessous */

.vod-info-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  line-height: 1.3;
}

.vod-info-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.vod-progress-section { margin-top: 8px; }

.vod-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

/* ── Écran Analyse vidéo — guideline barres & cartes ──────────────────────────
   Une seule piste de progression pour tout l'écran (.vod-track) : capsule
   pleine, 6px, bordure implicite via var(--border). Le fill (> i) n'a JAMAIS
   son propre border-radius — la piste le découpe (overflow:hidden). Un rayon
   propre sur le fill = ce rectangle arrondi "flottant" imbriqué dans la piste. */
.vod-track {
  height: 6px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.vod-track > i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 0;
  background: var(--accent);
  transition: width 0.1s linear;
}

/* Shimmer indéterminé — tourne tant que l'analyse est active, pour donner un
   signal visible "ça travaille" même quand le % réel ne bouge pas entre deux
   jalons (transcription d'un long VOD notamment). */
.vod-track > i.working {
  position: relative;
  overflow: hidden;
}

.vod-track > i.working::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.28), transparent);
  animation: vod-bar-shimmer 1.4s ease-in-out infinite;
}

@keyframes vod-bar-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* Import par lien (V2, point 5) — même principe que .vod-track > i.working : un reflet qui
   défile en continu, pour que la barre ne semble jamais figée même les premières secondes
   où yt-dlp n'a encore renvoyé aucun pourcentage réel (retour de Flavien : "ça fige"). */
.import-bar {
  position: relative;
  overflow: hidden;
}
.import-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: vod-bar-shimmer 1.4s ease-in-out infinite;
}

.vod-live-banner {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--elevated);
  border: 1px solid var(--border);
}

.vod-live-banner-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.vod-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-secondary);
  animation: pulse-dot 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.vod-steps-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vod-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  transition: color 0.3s ease;
}

.vod-step.active { color: var(--text-primary); font-weight: 500; }
.vod-step.done   { color: var(--success); }

.vstep-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.vstep-dot.pending { background: var(--elevated); border: 1.5px solid var(--border-strong); }
.vstep-dot.active  { background: var(--accent); box-shadow: 0 0 8px rgba(255,255,255,0.35); animation: pulse-dot 1s ease-in-out infinite; }
.vstep-dot.done    { background: #ffffff; }

.vod-clips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 1300px) {
  .vod-clips-grid { grid-template-columns: repeat(2, 1fr); }
}

.vod-clip-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.1);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.vod-clip-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.vod-clip-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--elevated);
  overflow: hidden;
}

.vod-clip-thumb img,
.vod-clip-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Phase B — grille de projets (hub) ────────────────────────────────────── */
.vod-projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 1300px) {
  .vod-projects-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .vod-projects-grid { grid-template-columns: repeat(2, 1fr); }
}

.vod-project-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}

.vod-project-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.vod-project-card.disabled {
  cursor: default;
  opacity: 0.55;
}
.vod-project-card.disabled:hover {
  border-color: rgba(255, 255, 255, 0.12);
  transform: none;
}

.vod-project-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--elevated);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vod-project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vod-project-status {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.vod-project-status.ready      { background: rgba(34,197,94,0.18);  color: #22c55e; }
.vod-project-status.analyzing  { background: rgba(234,179,8,0.18);  color: #eab308; }
.vod-project-status.failed,
.vod-project-status.interrupted { background: rgba(239,68,68,0.18); color: #ef4444; }
.vod-project-status.missing    { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

.vod-project-info {
  padding: 10px 12px 12px;
}

.vod-project-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 3px;
}

.vod-project-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0;
}

.vod-project-relaunch-btn {
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-app-region: no-drag;
}

.vod-clips-tab {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-app-region: no-drag;
}

.vod-clips-tab.active {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.vod-clip-score {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0,0,0,0.82);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.18);
}

.vod-clip-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.vod-clip-time {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(0,0,0,0.8);
  color: var(--text-secondary);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
}

.vod-clip-info {
  padding: 14px;
  background: rgba(0, 0, 0, 0.45);
}

.vod-clip-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.vod-clip-reason {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.4;
}

.vod-clip-actions {
  display: flex;
  gap: 8px;
}

.vod-clip-actions button {
  flex: 1;
  padding: 7px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--elevated);
  color: var(--text-secondary);
  transition: background 0.12s ease, color 0.12s ease;
  -webkit-app-region: no-drag;
}

.vod-clip-actions button:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}

.vod-clip-actions .btn-edit {
  background: var(--accent);
  color: #0A0A0A;
  border-color: transparent;
}

.vod-clip-actions .btn-edit:hover { background: var(--accent-hover); }
.vod-clip-actions .btn-edit:disabled { color: rgba(10,10,10,0.5); cursor: default; }

.vod-caption-display {
  font-size: 18px;
  font-weight: 800;
  color: white;
  text-align: center;
  padding: 10px 12px 4px;
  line-height: 1.2;
  letter-spacing: -0.3px;
}

.vod-clip-title-desc {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 0 10px 8px;
  line-height: 1.4;
}

/* ─── PLAN CARDS 2-COL LAYOUT ────────────────────────── */

.plan-cards-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 760px;
}

.plan-card-header { margin-bottom: 20px; }

.plan-card-tagline {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
}

.plan-btn-pro {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.06) 100%);
  border: none;
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: opacity 0.15s ease;
}

.plan-btn-pro:hover { opacity: 0.9; }

/* ─── UTILITY ────────────────────────────────────────── */

.hidden { display: none !important; }

/* ─── SCROLLBARS ─────────────────────────────────────── */

::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
}

/* ─── LIQUID GLASS REINFORCEMENT LAYER ───────────────────────────
   Forces glass legibility over the visible background image.
   Kept as a dedicated override layer (uses !important) so it always
   wins regardless of the specificity of the component rules above. */

.editor-controls, .vod-steps-list,
#vod-ai-status-bar {
  background: transparent !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: none !important;
}

.timeline-panel {
  background: rgba(255,255,255,0.06) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  box-shadow: none !important;
}

.timeline-topbar {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.sidebar {
  background: transparent !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  box-shadow: none !important;
}

.topbar {
  background: transparent !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  box-shadow: none !important;
}

.track-row {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  flex: 1 !important;
  height: auto !important;
  min-height: 28px !important;
}

.stat-value,
.screen-title,
.settings-value,
.det-status-title,
.vod-drop-title,
.clip-name,
.clip-card-name,
.moment-caption,
.audio-item-name,
.feature-card-title,
.feature-stat-value,
.vod-clip-title,
.plan-limit-title,
.plan-limit-usage { color: #ffffff !important; }

.stat-label,
.screen-sub,
.settings-label,
.det-status-sub,
.vod-drop-sub,
.moment-channel,
.audio-item-category,
.feature-card-desc { color: rgba(255,255,255,0.6) !important; }

.stat-sub,
.settings-section-label,
.clip-card-meta,
.moment-tags,
.track-label-col span,
.feature-stat-label,
.vod-clip-reason,
.plan-limit-desc { color: rgba(255,255,255,0.4) !important; }

.nav-section-label { color: rgba(255,255,255,0.3) !important; }

.nav-item { color: rgba(255,255,255,0.55) !important; }

.nav-item:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.08) !important;
}

.nav-item.active {
  color: #ffffff !important;
  background: rgba(255,255,255,0.1) !important;
  border-left: 2px solid rgba(255,255,255,0.6) !important;
}

.nav-badge {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

.btn-primary {
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.btn-primary:hover {
  background: rgba(255,255,255,0.22) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

.btn-sm {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: rgba(255,255,255,0.8) !important;
}

.btn-sm:hover {
  background: rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

input:not([type="range"]):not([type="checkbox"]):not([type="file"]), select, textarea {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  color: #ffffff !important;
}

input:not([type="range"]):not([type="checkbox"]):not([type="file"]):focus, select:focus {
  border-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.12) !important;
}

input::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

#vod-directives-input {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 2px dashed rgba(255, 255, 255, 0.25) !important;
  border-radius: 16px !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#vod-directives-input:focus {
  box-shadow: none !important;
}

#vod-directives-input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Textarea "Étape 2" du profil créateur (Paramètres) — vit déjà dans une
   .creator-profile-step qui a son propre border+background (ligne ~759).
   Lui donner AUSSI un border/background créait une boîte dans la boîte.
   Ici : transparente au repos (se fond dans la step-card), léger contour
   seulement au focus pour le feedback — même esprit que .wesma-chat-input. */
#creator-profile-input {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  padding: 14px !important;
}

#creator-profile-input:focus {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  outline: none;
}

/* Même famille de bug : ces champs vivent directement dans une .settings-section
   qui a déjà son propre border+background — leur border inline (via le reset
   global input!important) collait dessus et faisait une boîte dans la boîte.
   Même traitement : transparent au repos, contour léger seulement au focus. */
#wesma-alias-input,
#custom-instructions-input,
#referral-link-input {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Même bug, même famille : #wesma-convo-search vit dans .wesma-convo-search-wrap
   qui a déjà son propre border+background — le reset global "input!important"
   plus haut (ligne ~6001) écrasait le fond transparent (il gagne car !important
   bat une règle sans !important, peu importe la spécificité de l'ID). */
#wesma-convo-search {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#wesma-convo-search:focus {
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

#wesma-alias-input:focus,
#custom-instructions-input:focus,
#referral-link-input:focus {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  box-shadow: none !important;
  outline: none;
}

/* ─── FLATTEN: remove every remaining box-shadow app-wide ── */

* {
  box-shadow: none !important;
}

/* ─── RIGHT-SIDE CONTENT: blur on cards only, not the wrapper (.sidebar untouched) ── */

.main {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
}

.audio-library-panel {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  box-shadow: none !important;
}

.home-hero {
  background: rgba(30, 30, 30, 0.3) !important;
  backdrop-filter: blur(25px) !important;
  -webkit-backdrop-filter: blur(25px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}

.clip-card, .vod-clip-card {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: none !important;
}

/* ─── PARENT CONTAINERS: force transparent between body and cards ── */

.app, .screen, .screen-padded, .screen-editor, .content {
  background: transparent !important;
  background-color: transparent !important;
}

.home-hero, .activity-section,
.insight-card, .contact-card, .plan-card, .connect-cta-card {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
}

/* Exact .sidebar properties copied verbatim (per explicit request) */
.feature-card, .quick-card, .moment-card,
.detection-status-card, .settings-section,
.vod-analyzing-card, .vod-drop-zone, .trigger-card,
.faq-item, .account-card, .plan-limit-card {
  background: transparent !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: none !important;
}

.stat-card {
  background: transparent !important;
  backdrop-filter: blur(40px) !important;
  -webkit-backdrop-filter: blur(40px) !important;
  border-top: none !important;
  border-left: none !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0px !important;
  box-shadow: none !important;
}

/* ─── GLASS/BLUR: unified rounded corners on every card ──
   Ancien box-shadow (ring extérieur + inset highlight) créait un effet de
   "boîte dans la boîte" — deux contours concentriques en plus du border
   normal. Un seul contour propre suffit. */

.stat-card, .feature-card, .clip-card, .vod-clip-card,
.moment-card, .detection-status-card, .settings-section,
.vod-analyzing-card, .vod-drop-zone, .trigger-card,
.faq-item, .account-card, .plan-limit-card, .home-hero,
.quick-card, .activity-section, .insight-card, .contact-card,
.plan-card, .connect-cta-card, .cal-clip-card,
.current-plan-card, .twitch-clip-card {
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  box-shadow: none !important;
}

/* ─── BIBLIOTHÈQUE AUDIO: liquid glass ────────────────────────────── */

.audio-library-panel,
.audio-item,
.audio-lib-sfx,
.audio-lib-music,
#audio-upload-zone,
.track-clip {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.audio-item {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
}

.audio-item:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.15) !important;
}

#audio-upload-zone {
  background: rgba(255,255,255,0.03) !important;
  border: 2px dashed rgba(255,255,255,0.15) !important;
}

/* WaveSurfer trim region handles */
[data-resize="left"],
[data-resize="right"] {
  width: 3px !important;
  background: rgba(255,255,255,0.8) !important;
  opacity: 1 !important;
  border-radius: 2px;
  cursor: ew-resize !important;
}


/* Cut markers in timeline */
.cut-marker {
  transition: opacity 0.15s;
}
.cut-marker:hover {
  opacity: 0.7;
}

/* Spin animation for loading buttons */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Auto-edit Gemini progress bar */
.auto-edit-shimmer-track {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}

.auto-edit-shimmer-bar {
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  border-radius: 2px;
  animation: auto-edit-slide 1.6s ease-in-out infinite;
}

@keyframes auto-edit-slide {
  0%   { left: -60%; }
  100% { left: 100%; }
}

/* ── Custom fonts for text overlay ─────────── */
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-Black.ttf');      font-weight:900; font-style:normal; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-BlackItalic.ttf');font-weight:900; font-style:italic; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-ExtraBold.ttf');  font-weight:800; font-style:normal; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-ExtraBoldItalic.ttf');font-weight:800;font-style:italic;}
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-Bold.ttf');       font-weight:700; font-style:normal; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-BoldItalic.ttf'); font-weight:700; font-style:italic; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-Regular.ttf');    font-weight:400; font-style:normal; }
@font-face { font-family:'FFNort'; src:url('/app/assets/fonts/FFNort-Italic.ttf');     font-weight:400; font-style:italic; }
@font-face { font-family:'Bangers'; src:url('/app/assets/fonts/Bangers-Regular.ttf');  font-weight:400; font-style:normal; }
@font-face { font-family:'Komika'; src:url('/app/assets/fonts/KomikaAxis.ttf'); font-weight:100 900; font-style:normal; }
@font-face { font-family:'Montserrat'; src:url('/app/assets/fonts/Montserrat-Variable.ttf'); font-weight:100 900; font-style:normal; }
@font-face { font-family:'Inter';   src:url('/app/assets/fonts/Inter-Variable.ttf');   font-weight:100 900; font-style:normal; }
@font-face { font-family:'WesmaDisplay'; src:url('/app/assets/fonts/WesmaDisplayBold.otf');   font-weight:700; }
@font-face { font-family:'WesmaDisplay'; src:url('/app/assets/fonts/WesmaDisplayMedium.otf'); font-weight:500; }
@font-face { font-family:'WesmaDisplay'; src:url('/app/assets/fonts/WesmaDisplayRegular.otf');font-weight:400; }
@font-face { font-family:'AvenirNext'; src:url('/app/assets/fonts/avenir-next-bold.ttf'); font-weight:700; }
@font-face { font-family:'UnisonPro';  src:url('/app/assets/fonts/unison-pro-bold.otf');  font-weight:700; }

/* ── Font picker + style buttons ─────────────── */
.font-pick {
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.55);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  -webkit-app-region: no-drag;
  transition: background 0.12s, color 0.12s;
}
.font-pick.active,
.font-pick:hover {
  background: rgba(255,255,255,0.18);
  color: white;
  border-color: rgba(255,255,255,0.35);
  font-weight: 700;
}
.font-style-btn {
  transition: background 0.12s, color 0.12s;
}
.font-style-btn.active {
  background: rgba(255,255,255,0.18) !important;
  color: white !important;
  border-color: rgba(255,255,255,0.35) !important;
}

/* ─── TIMELINE WAVEFORM ROW ─────────────────────────────────────────────── */
#track-row-waveform {
  flex: 0.65 !important;
  height: auto !important;
  min-height: 22px !important;
}
#track-waveform {
  padding: 0 !important;
  overflow: hidden !important;
}
#timeline-waveform-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── SEGMENT BLOCKS (timeline video track) ─────────────────────────────── */
#track-video {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 4px 2px !important;
  overflow: hidden !important;
}
/* Same padding as #track-video — the waveform canvas below must sit at the exact
   same horizontal inset/width as the seg-blocks above it, or cut boundaries drift
   out of alignment with the audio peaks as the timeline gets wider. */
#track-waveform {
  padding: 4px 2px !important;
}
/* Same treatment as #track-video/#track-waveform — the music clip must sit flush
   in its lane (stretched to full height, same inset) instead of floating as a
   centered pill with its own padding, which read as an overlay rather than a
   track block. */
#track-music {
  align-items: stretch !important;
  padding: 4px 2px !important;
  overflow: hidden !important;
}
.seg-block {
  /* flex:N is set inline per segment duration — must sum to exactly 100% of the
     track width with zero margin/gap, so boundaries land on the same pixel as the
     waveform canvas below (which draws in pure %-of-duration, no gap overhead). */
  position: relative;
  flex-shrink: 0;
  min-width: 12px;
  border-radius: 0;
  background: color-mix(in srgb, var(--timeline-color) 16%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--timeline-color) 36%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--timeline-color) 36%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.seg-block:first-child { border-left: 1px solid color-mix(in srgb, var(--timeline-color) 36%, transparent); }
.seg-block:last-child { border-right: 1px solid color-mix(in srgb, var(--timeline-color) 36%, transparent); }
/* Cut boundary marker — a border instead of a sibling element, so it doesn't
   consume flex-distributed width (which would desync it from the waveform). */
.seg-block:not(:first-child) { border-left: 2px solid var(--cut-color); }
.seg-block:hover {
  background: color-mix(in srgb, var(--timeline-color) 26%, transparent);
  border-color: color-mix(in srgb, var(--timeline-color) 55%, transparent);
}
.seg-block.selected {
  background: color-mix(in srgb, var(--timeline-color) 36%, transparent);
  border-color: color-mix(in srgb, var(--timeline-color) 75%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--timeline-color) 30%, transparent);
}
.seg-label {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 18px 0 4px;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.seg-delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.85);
  border: none;
  color: white;
  font-size: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 0;
  line-height: 1;
  -webkit-app-region: no-drag;
}
.seg-block:hover .seg-delete-btn,
.seg-block.selected .seg-delete-btn { opacity: 1; }
/* .seg-gap-overlay removed — sequential flex layout has no gaps */

/* ─── SEGMENT BOUNDARY DRAG-RESIZE HANDLES ──────────────────────────────── */
.seg-resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9px;
  z-index: 2;
  cursor: ew-resize;
  -webkit-app-region: no-drag;
}
/* Restent DANS les bornes du bloc — .seg-block a overflow:hidden, un offset négatif
   serait rogné et la poignée deviendrait injouable. */
.seg-resize-handle.left  { left: 0; }
.seg-resize-handle.right { right: 0; }
.seg-resize-handle::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: transparent;
  border-radius: 1px;
  transition: background 0.12s;
}
.seg-block:hover .seg-resize-handle::after,
.seg-resize-handle:hover::after {
  background: rgba(255, 255, 255, 0.55);
}
.seg-resize-handle:hover::after { background: var(--timeline-color); width: 3px; }
.seg-delete-btn { z-index: 3; }

/* ─── TIMELINE RESIZE HANDLE ────────────────────────────────────────────── */
#timeline-resize-handle {
  width: 100%;
  height: 6px;
  cursor: ns-resize;
  flex-shrink: 0;
  position: relative;
  -webkit-app-region: no-drag;
  z-index: 10;
}
#timeline-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
  transition: background 0.15s, width 0.15s;
}
#timeline-resize-handle:hover::after {
  background: rgba(255, 255, 255, 0.38);
  width: 48px;
}

/* ─── TIMELINE HORIZONTAL ZOOM ───────────────────────────────────────────── */
.timeline-tracks {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}
/* Label columns stay fixed during horizontal scroll */
.track-label-col {
  position: sticky !important;
  left: 0 !important;
  z-index: 3 !important;
  /* Fond OPAQUE (teinte verre par-dessus le fond de l'app) : un fond translucide laissait
     les blocs de segments défiler visiblement sous la colonne quand la timeline est zoomée. */
  background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)), var(--bg-app) !important;
  z-index: 5 !important;
  border-right: 1px solid rgba(255,255,255,0.07) !important;
}
/* Zoom label in topbar */
.tl-zoom-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  padding: 2px 6px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
  user-select: none;
  -webkit-user-select: none;
}
.tl-zoom-label:hover {
  color: rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.1);
}

/* ─── PER-TRACK RESIZE HANDLE ────────────────────────────────────────────── */
.track-resize-handle-row {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 20;
  -webkit-app-region: no-drag;
  pointer-events: auto;
}
/* Visible stripe on hover of the entire row, not just the handle */
.track-row[id]:hover > .track-resize-handle-row {
  background: rgba(255,255,255,0.04);
}
.track-resize-handle-row::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 2px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.18);
  transition: width 0.15s, background 0.15s;
}
.track-resize-handle-row:hover::after {
  width: 48px;
  background: rgba(255, 255, 255, 0.5);
}
/* Track rows with a resize handle need relative positioning */
.track-row[id] {
  position: relative !important;
}

/* ─── AUDIO LIBRARY IN LEFT PANEL (accordion context) ───────────────────── */
#acc-audio .library-content {
  max-height: 160px;
  overflow: hidden;
}
#acc-audio .lib-section.active {
  height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
}
#acc-audio .lib-section.active::-webkit-scrollbar { width: 3px; height: 0; }
#acc-audio .lib-section.active::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15); border-radius: 2px;
}

/* ─── KEYBOARD SHORTCUT KEYS ─────────────────────────────────────────────── */
kbd.kbd,
button.kbd {
  display: inline-block;
  padding: 2px 6px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-weight: 600;
  line-height: 1.4;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0;
  margin: 0;
}

button.kbd.kbd-editable {
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

button.kbd.kbd-editable:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
}

button.kbd.kbd-editable:active {
  background: rgba(255,255,255,0.24);
}

button.kbd.kbd-listening {
  background: rgba(239,68,68,0.20);
  border-color: rgba(239,68,68,0.55);
  color: #fca5a5;
  animation: wesma-kbd-pulse 1s ease-in-out infinite;
}

@keyframes wesma-kbd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ─── ACTIVE TOOL BADGE ──────────────────────────────────────────────────── */
.tl-active-tool-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(239,68,68,0.25);
  border: 1px solid rgba(239,68,68,0.50);
  color: #fca5a5;
  text-transform: uppercase;
}

/* ─── RAZOR TOOL CURSOR ──────────────────────────────────────────────────── */
body.tool-cut .timeline-tracks,
body.tool-cut .timeline-tracks * {
  cursor: crosshair !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDES — apply on top of component-specific dark styles
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="light"],
:root[data-theme="system"] {
  color-scheme: light;
}

/* Explicit light-mode helpers combined into one block */
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .sidebar-footer {
  background: var(--sidebar-bg);
  border-color: var(--border);
}
:root[data-theme="light"] .nav-item { color: var(--text-secondary); }
:root[data-theme="light"] .nav-item:hover,
:root[data-theme="light"] .nav-item.active { background: var(--hover-bg); color: var(--text-primary); }
:root[data-theme="light"] .nav-section-label { color: var(--text-muted); }
:root[data-theme="light"] .logo-text { color: #0A0A0A; }

/* Inputs & selects */
:root[data-theme="light"] input:not([type="range"]):not([type="checkbox"]):not([type="file"]),
:root[data-theme="light"] select,
:root[data-theme="light"] textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--input-color);
}

/* Buttons */
:root[data-theme="light"] .btn-sm {
  background: rgba(0,0,0,0.06);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-primary);
  box-shadow: none;
}
:root[data-theme="light"] .btn-sm:hover {
  background: rgba(0,0,0,0.10);
  border-color: rgba(0,0,0,0.20);
}

/* Cards / panels */
:root[data-theme="light"] .settings-section {
  background: var(--card-bg);
  border-color: var(--border);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* Timeline panel */
:root[data-theme="light"] .timeline-panel {
  background: rgba(240,240,240,0.88);
  border-color: var(--border);
}

/* Screen backgrounds */
:root[data-theme="light"] .screen-padded {
  background: transparent;
}

/* Nav badge */
:root[data-theme="light"] .nav-badge.new {
  background: rgba(0,0,0,0.08);
  color: var(--text-primary);
  border-color: rgba(0,0,0,0.12);
}

/* kbd shortcut keys */
:root[data-theme="light"] kbd.kbd {
  background: rgba(0,0,0,0.07);
  border-color: rgba(0,0,0,0.15);
  color: var(--text-secondary);
}

@media (prefers-color-scheme: light) {
  :root[data-theme="system"] .sidebar,
  :root[data-theme="system"] .sidebar-footer { background: var(--sidebar-bg); border-color: var(--border); }
  :root[data-theme="system"] .nav-item { color: var(--text-secondary); }
  :root[data-theme="system"] .nav-item:hover,
  :root[data-theme="system"] .nav-item.active { background: var(--hover-bg); color: var(--text-primary); }
  :root[data-theme="system"] .logo-text { color: #0A0A0A; }
  :root[data-theme="system"] .btn-sm { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: var(--text-primary); }
  :root[data-theme="system"] .settings-section { background: var(--card-bg); border-color: var(--border); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — active when user sets a custom background image
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dark overlay between bg image and app content for readability */
body.has-custom-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
}

/* Ensure app content sits above overlay */
body.has-custom-bg .app { position: relative; z-index: 1; }

/* Stronger glass effect on all surfaces */
body.has-custom-bg .sidebar,
body.has-custom-bg .settings-section,
body.has-custom-bg .timeline-panel,
body.has-custom-bg .audio-library-panel {
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  background: rgba(8, 8, 12, 0.48) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* Text on glass surfaces stays white regardless of mode */
body.has-custom-bg .sidebar *,
body.has-custom-bg .settings-section * {
  --text-primary: #ffffff;
  --text-secondary: rgba(255,255,255,0.6);
  --text-muted: rgba(255,255,255,0.35);
}

/* ─── THEME TOGGLE WIDGET ────────────────────────────────────────────────── */

.theme-toggle {
  display: flex;
  gap: 6px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px;
}

.theme-toggle-btn {
  flex: 1;
  padding: 5px 10px;
  border: none;
  border-radius: calc(var(--radius-sm) - 2px);
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  font-family: var(--font-text);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.theme-toggle-btn.active {
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
}

.theme-toggle-btn:hover:not(.active) {
  background: var(--hover-bg);
  color: var(--text-primary);
}

/* ── LAYOUT SELECTOR (Montage IA panel) ─────────────────────────────────── */
.layout-selector {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
}
.layout-selector-label {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 7px;
}
.layout-radio-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  cursor: pointer;
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  -webkit-app-region: no-drag;
}
.layout-radio-row input[type="radio"] { display: none; }
.layout-radio-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  flex-shrink: 0;
  transition: border-color 0.12s, background 0.12s;
}
.layout-radio-row input[type="radio"]:checked ~ .layout-radio-mark {
  border-color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

/* ── ZONE PICKER MODAL ───────────────────────────────────────────────────── */
.zp-rect {
  position: absolute;
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  cursor: move;
  box-sizing: border-box;
}
.zp-handle {
  position: absolute;
  width: 10px; height: 10px;
  background: white;
  border: 1px solid rgba(0,0,0,0.4);
  border-radius: 2px;
}
.zp-nw { top: -5px; left: -5px; cursor: nw-resize; }
.zp-ne { top: -5px; right: -5px; cursor: ne-resize; }
.zp-sw { bottom: -5px; left: -5px; cursor: sw-resize; }
.zp-se { bottom: -5px; right: -5px; cursor: se-resize; }

/* ── PODCAST ZONE PICKER (deux zones, "Modifier" — point 8 feedback) ───────── */
.zp-rect-a { border-color: #60a5fa; background: rgba(96,165,250,0.12); }
.zp-rect-b { border-color: #f0abfc; background: rgba(240,171,252,0.12); }
.zp-rect-c { border-color: #f59e0b; background: rgba(245,158,11,0.12); }
.zp-rect-label {
  position: absolute;
  top: -20px; left: -2px;
  font-size: 10px;
  font-weight: 800;
  color: #0A0A0A;
  background: rgba(255,255,255,0.9);
  border-radius: 4px;
  padding: 1px 6px;
  pointer-events: none;
}
.zp-rect-a .zp-rect-label { background: #60a5fa; color: #0A0A0A; }
.zp-rect-b .zp-rect-label { background: #f0abfc; color: #0A0A0A; }
.zp-rect-c .zp-rect-label { background: #f59e0b; color: #0A0A0A; }

/* ─── Quiz — question par question, animé (retour de Flavien : "pas comme un
   questionnaire plate, avec des animations, un beau design") ─────────────────────── */
@keyframes quizSlideIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes quizSlideOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
@keyframes quizPop {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes quizDotFill {
  from { width: 0%; }
}
.quiz-question-card {
  position: absolute; inset: 0;
  animation: quizSlideIn 0.35s ease forwards;
}
.quiz-question-card.leaving {
  animation: quizSlideOut 0.25s ease forwards;
}
.quiz-option-btn {
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.quiz-option-btn:hover:not(:disabled) {
  transform: translateX(3px);
}
.quiz-option-btn:disabled {
  cursor: default;
}
.quiz-result-pop {
  animation: quizPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.quiz-progress-dot {
  height: 4px; border-radius: 2px; flex: 1; background: rgba(255,255,255,0.1); overflow: hidden;
}
.quiz-progress-dot-fill {
  height: 100%; background: white; border-radius: 2px;
  animation: quizDotFill 0.3s ease forwards;
}


/* ── Pop-up de clarification du chat — cases à cocher blanches, dans le style Wesma ── */
.wesma-clarify-opt {
  display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px;
  font-size: 12.5px; color: rgba(255,255,255,0.8); cursor: pointer; transition: background 0.12s;
}
.wesma-clarify-opt:hover { background: rgba(255,255,255,0.06); }
.wesma-clarify-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.wesma-clarify-box {
  position: relative; width: 16px; height: 16px; flex-shrink: 0; border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.35); background: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.wesma-clarify-opt input:checked + .wesma-clarify-box { background: #ffffff; border-color: #ffffff; }
.wesma-clarify-opt input:checked + .wesma-clarify-box::after {
  content: ''; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #0A0A0A; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.wesma-clarify-opt input:focus-visible + .wesma-clarify-box { outline: 2px solid rgba(255,255,255,0.6); outline-offset: 2px; }


/* ── Réponses de l'assistant en Markdown (titres, puces, gras) ── */
.wesma-bubble.wesma-md { white-space: normal; line-height: 1.6; }
.wesma-md h3 { font-size: 15px; font-weight: 700; color: #fff; margin: 16px 0 6px; }
.wesma-md h4 { font-size: 14px; font-weight: 700; color: #fff; margin: 18px 0 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.wesma-md > h3:first-child, .wesma-md > h4:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.wesma-md p { margin: 0 0 8px; }
.wesma-md ul, .wesma-md ol { margin: 0 0 8px; padding-left: 20px; }
.wesma-md li { margin: 3px 0; }
.wesma-md li::marker { color: rgba(255,255,255,0.4); }
.wesma-md strong { color: #fff; font-weight: 700; }
.wesma-md code { padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.1); font-size: 12.5px; }
.wesma-md hr { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 12px 0; }
.wesma-md > :last-child { margin-bottom: 0; }

/* Aperçu du pack Komika : rebond 80% -> 110% -> 100% en boucle */
@keyframes wesmaPackPop { 0% { transform: scale(0.8); } 18% { transform: scale(1.1); } 34% { transform: scale(1); } 100% { transform: scale(1); } }
.wesma-pack-pop { animation: wesmaPackPop 1.6s ease-out infinite; }

/* ── Cartes d'animation des sous-titres (aperçu animé, sans libellé) ── */
.sa-card { -webkit-app-region:no-drag; height:54px; border-radius:8px; border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px;
  font-family:'Montserrat','Inter',sans-serif; font-weight:800; font-size:13px; color:#fff; overflow:hidden; padding:0 4px; }
.sa-card:hover { background:rgba(255,255,255,0.07); }
.sa-card .w { display:inline-block; text-shadow:0 1px 2px rgba(0,0,0,.8); animation-duration:2.4s; animation-iteration-count:infinite; animation-timing-function:ease-out; }
.sa-card .w:nth-child(2) { animation-delay:.45s; } .sa-card .w:nth-child(3) { animation-delay:.9s; }
.sa-highlight .w { animation-name:saHi; } .sa-pop .w { animation-name:saPop; } .sa-karaoke .w { animation-name:saKar; }
.sa-bounce .w { animation-name:saBounce; } .sa-typewriter .w { animation-name:saType; } .sa-slide .w { animation-name:saSlide; }
.sa-zoom .w { animation-name:saZoom; } .sa-shake .w { animation-name:saShake; } .sa-pulse .w { animation-name:saPulse; } .sa-glow .w { animation-name:saGlow; }
@keyframes saHi { 0%,28% { color:#22c55e; } 34%,100% { color:#fff; } }
@keyframes saPop { 0%,28% { transform:scale(1.22); } 34%,100% { transform:scale(1); } }
@keyframes saKar { 0% { color:rgba(255,255,255,.35); } 12%,28% { color:#22c55e; } 34%,100% { color:#fff; } }
@keyframes saBounce { 0% { opacity:0; transform:scale(.8); } 5% { opacity:1; transform:scale(1.12); } 10%,86% { opacity:1; transform:scale(1); } 100% { opacity:0; } }
@keyframes saType { 0% { opacity:0; } 4%,86% { opacity:1; } 100% { opacity:0; } }
@keyframes saSlide { 0% { opacity:0; transform:translateY(10px); } 10%,86% { opacity:1; transform:translateY(0); } 100% { opacity:0; } }
@keyframes saZoom { 0%,28% { transform:scale(1.32); color:#22c55e; } 36%,100% { transform:scale(1); color:#fff; } }
@keyframes saShake { 0%,28% { color:#22c55e; transform:rotate(0); } 6% { transform:rotate(-6deg); } 12% { transform:rotate(6deg); } 18% { transform:rotate(-6deg); } 24% { transform:rotate(5deg); } 34%,100% { transform:rotate(0); color:#fff; } }
@keyframes saPulse { 0%,34%,100% { transform:scale(1); } 17% { transform:scale(1.24); } }
@keyframes saGlow { 0%,28% { color:#22c55e; text-shadow:0 0 10px #22c55e,0 0 3px #22c55e; } 34%,100% { color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.8); } }

/* Le panneau Sous-titres (animations + transcription) dépasse 600 px : ne pas le tronquer. */
#acc-group-soustitres.open .accordion-body { max-height: 3000px; }

/* Barre de défilement horizontale de la timeline : fine et discrète */
.timeline-tracks::-webkit-scrollbar { width: 4px; height: 4px; }
.timeline-tracks::-webkit-scrollbar-track { background: transparent; }
.timeline-tracks::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.22); border-radius: 2px; }
.timeline-tracks::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }
.timeline-tracks::-webkit-scrollbar-corner { background: transparent; }