/* Mockups du panel VoxaCue — recréés en HTML/CSS (dérivés de
   extension/client/css/style.css), non interactifs. Branding toujours à jour,
   zones annotables par de simples pastilles positionnées en %. */

.pmk {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid #46464a;
  border-radius: 10px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: #f2f2f3;
  user-select: none;
}
/* overflow visible pour laisser dépasser les pastilles d'annotation :
   les coins arrondis sont portés par la barre du haut et celle du bas. */
.pmk-chrome { border-radius: 9px 9px 0 0; }
.pmk-apply { border-radius: 0 0 9px 9px; }
.pmk * { box-sizing: border-box; }

/* Chrome du panneau Premiere */
.pmk-chrome {
  display: flex; align-items: center; gap: 7px;
  background: #232326; border-bottom: 1px solid #303034;
  padding: 6px 10px; font-size: 11px; color: #9a9aa1;
}
.pmk-chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: #4a4a4f; }
.pmk-chrome .dot.r { background: #e0443e; }

.pmk-head { display: flex; align-items: center; gap: 8px; padding: 10px 13px 6px; }
.pmk-logo { font-weight: 700; font-size: 14px; }
.pmk-logo b { color: var(--accent); font-weight: 700; }
.pmk-pill {
  margin-left: auto; font-size: 10px; padding: 3px 9px; border-radius: 10px;
  background: #27272a; color: #a1a1a8; max-width: 130px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmk-pill.ok { color: var(--accent); }
.pmk-gear { color: #a1a1a8; font-size: 13px; }

.pmk-tabs { display: flex; padding: 4px 12px 0; border-bottom: 1px solid #3a3a3e; }
.pmk-tabs span {
  flex: 1; text-align: center; padding: 8px 4px; color: #a1a1a8;
  font-weight: 600; font-size: 12px; border-bottom: 2px solid transparent;
}
.pmk-tabs span.on { color: #f2f2f3; border-bottom-color: var(--accent); }

.pmk-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 10px; }

.pmk-card {
  background: #1d1d1f; border: 1px solid #3a3a3e; border-radius: 9px; padding: 10px 11px;
}
.pmk-card h4 {
  font-size: 10px; color: #a1a1a8; text-transform: uppercase; letter-spacing: 0.5px;
  margin: 0 0 8px; font-weight: 600;
}
.pmk-lbl {
  font-size: 9.5px; color: #a1a1a8; text-transform: uppercase; letter-spacing: 0.5px;
  font-weight: 600; margin-bottom: 4px;
}
.pmk-select {
  display: flex; align-items: center; justify-content: space-between;
  background: #27272a; border: 1px solid #3a3a3e; border-radius: 6px;
  padding: 7px 9px; font-size: 12px; margin-bottom: 9px;
}
.pmk-select::after { content: '▾'; color: #6b6b72; font-size: 10px; }
.pmk-hint { font-size: 10px; color: var(--accent); margin: -4px 0 8px; }

.pmk-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.pmk-toggle .l { font-size: 12px; }
.pmk-toggle .s { font-size: 10px; color: #6b6b72; }
.pmk-sw { flex: none; width: 32px; height: 18px; border-radius: 9px; background: #323236; position: relative; }
.pmk-sw::before { content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #a1a1a8; top: 3px; left: 3px; }
.pmk-sw.on { background: var(--accent); }
.pmk-sw.on::before { left: auto; right: 3px; background: #fff; }

.pmk-btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #27272a; border: 1px solid #3a3a3e; border-radius: 6px;
  padding: 8px 12px; font-size: 12px; font-weight: 600;
}
.pmk-btn.primary { background: var(--accent); border-color: var(--accent); color: #06211f; }
.pmk-input {
  background: #27272a; border: 1px solid #3a3a3e; border-radius: 6px;
  padding: 7px 9px; font-size: 11px; color: #6b6b72; flex: 1;
}
.pmk-row { display: flex; gap: 8px; align-items: center; }

/* Préview (damier alpha + caption) */
.pmk-preview {
  position: relative; border-radius: 9px; overflow: hidden;
  background: #000;
  background-image: linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%),
    linear-gradient(45deg, #1a1a1a 25%, transparent 25%, transparent 75%, #1a1a1a 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  display: flex; align-items: center; justify-content: center;
  height: 190px;
}
.pmk-preview .vid {
  width: 96px; height: 100%;
  /* Vraie image de plan (créateur face caméra) + repli dégradé si absente */
  background-image: url('img/demo-bg.jpg'), linear-gradient(180deg, #2b3a4d, #1b2531);
  background-size: cover; background-position: center;
  border-radius: 2px; position: relative;
}
/* Préview animée du hero : canvas 9:16 rendu par le vrai moteur */
.pmk-video { display: block; height: 100%; width: auto; border-radius: 2px; }
.pmk-template {
  position: absolute; bottom: 7px; left: 7px;
  background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 210, 196, 0.4);
  color: #dfe6ea; font-size: 9px; font-weight: 600; letter-spacing: 0.3px;
  padding: 3px 7px; border-radius: 4px; pointer-events: none;
}

/* La caption reste DANS le plan vidéo : largeur bornée à celle du .vid, retour
   à la ligne comme le moteur (l'ancien nowrap débordait sur le damier). */
.pmk-cap {
  position: absolute; left: 50%; top: 58%; transform: translateX(-50%);
  max-width: 92px; width: max-content;
  text-align: center; font-family: 'Montserrat', sans-serif; font-weight: 900;
  font-size: 10.5px; line-height: 1.3; color: #fff; text-transform: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); white-space: normal;
}
.pmk-cap .em { display: block; font-size: 15px; margin-bottom: 2px; text-shadow: none; }
.pmk-cap .cps { background: var(--capsule); padding: 0 5px; border-radius: 8px; }
.pmk-ratio {
  position: absolute; top: 7px; right: 7px; display: flex; gap: 3px; font-size: 9px; font-weight: 600;
}
.pmk-ratio span { background: rgba(0, 0, 0, 0.55); color: #fff; padding: 3px 6px; border-radius: 4px; }
.pmk-ratio span.on { background: var(--accent); color: #06211f; }

/* Zone sûre plateforme : cadre pointillé DANS le plan (interface TikTok/Reels/
   Shorts en dehors — boutons à droite, description en bas). */
.pmk-safe {
  position: absolute; inset: 7px 20px 26px 6px;
  border: 1.5px dashed rgba(0, 210, 196, 0.9); border-radius: 4px;
  pointer-events: none;
}
.pmk-safe b {
  position: absolute; top: -1px; left: -1px;
  background: var(--accent); color: #06211f;
  font-size: 7.5px; font-weight: 800; letter-spacing: 0.3px;
  padding: 1px 5px; border-radius: 3px 0 4px 0;
}

/* Barre d'outils de l'éditeur */
.pmk-toolbar {
  display: flex; align-items: center; gap: 3px;
  background: #1d1d1f; border: 1px solid #3a3a3e; border-radius: 6px; padding: 4px 5px;
  color: #a1a1a8; font-size: 11px;
}
.pmk-toolbar .t {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px; border-radius: 5px; font-weight: 600; font-size: 10.5px;
}
.pmk-toolbar .t.on { background: rgba(0, 210, 196, 0.12); color: var(--accent); }
.pmk-toolbar .sep { width: 1px; align-self: stretch; margin: 3px 2px; background: #3a3a3e; }
.pmk-toolbar svg { width: 13px; height: 13px; }

/* Barre de recherche de lignes (fixe sous la toolbar) */
.pmk-search { display: flex; align-items: center; gap: 6px; padding-bottom: 2px; }
.pmk-search .box {
  flex: 1; background: #1d1d1f; border: 1px solid #3a3a3e; border-radius: 6px;
  padding: 5px 8px; color: #6b6b72; font-size: 10.5px;
}
.pmk-search .count { color: #6b6b72; font-size: 10px; }
.pmk-search .nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 20px; border: 1px solid #3a3a3e; border-radius: 5px;
  color: #a1a1a8; font-size: 9px;
}

/* Bloc de transcript + waveform */
.pmk-block {
  background: #1d1d1f; border: 1px solid #3a3a3e; border-radius: 6px; padding: 7px 9px 8px;
}
.pmk-block.sel { border-color: var(--accent); }
.pmk-block .tc {
  display: flex; align-items: center; gap: 6px; font-size: 9px; color: #6b6b72;
  font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
.pmk-block .tc .acts { margin-left: auto; display: flex; gap: 5px; color: #8b8b92; font-size: 10px; letter-spacing: 1px; }
.pmk-block .tx { font-size: 12px; line-height: 1.45; }
.pmk-block .tx .kw { color: var(--kw-green); font-weight: 700; }
.pmk-block .tx .un { border-bottom: 1px dotted #ffb020; }
.pmk-wave { display: block; width: 100%; height: 30px; margin-top: 6px; background: #17171a; border-radius: 4px; }

/* Grille de presets (onglet Style) */
.pmk-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pmk-preset {
  background: #1d1d1f; border: 1px solid #3a3a3e; border-radius: 6px;
  padding: 8px 3px 5px; text-align: center; overflow: hidden;
}
.pmk-preset.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pmk-preset .sample {
  font-size: 9px; font-weight: 900; height: 22px; display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; background: #2b2b30; border-radius: 3px; margin: 0 4px 4px;
  white-space: nowrap;
}
.pmk-preset .nm { font-size: 8.5px; color: #a1a1a8; }

/* Groupes de réglages Style */
.pmk-group {
  border-top: 1px solid #3a3a3e; padding: 8px 2px; display: flex; align-items: center;
  color: #a1a1a8; font-weight: 600; font-size: 11px;
}
.pmk-group::after { content: '▸'; margin-left: auto; color: #6b6b72; }
.pmk-group.open::after { content: '▾'; }
.pmk-slider { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pmk-slider .rail { flex: 1; height: 4px; border-radius: 2px; background: #323236; position: relative; }
.pmk-slider .rail::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 55%;
  background: var(--accent); border-radius: 2px;
}
.pmk-slider .rail::after {
  content: ''; position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; top: -4px; left: calc(55% - 6px);
}
.pmk-slider .v { font-size: 10px; color: #a1a1a8; min-width: 30px; text-align: right; }
.pmk-color { display: flex; gap: 8px; margin-bottom: 9px; }
.pmk-color .c { flex: 1; height: 26px; border-radius: 6px; border: 1px solid #3a3a3e; }

/* Barre Appliquer */
.pmk-apply {
  display: flex; gap: 7px; align-items: center;
  border-top: 1px solid #3a3a3e; background: #1d1d1f; padding: 9px 12px;
}
.pmk-apply .pmk-select { flex: 0 0 42%; margin: 0; }
.pmk-apply .pmk-btn { flex: 1; }

/* Progression */
.pmk-progress { margin-top: 2px; }
.pmk-progress .pl { display: flex; justify-content: space-between; color: #a1a1a8; font-size: 10px; margin-bottom: 4px; }
.pmk-progress .pb { height: 5px; border-radius: 3px; background: #27272a; overflow: hidden; }
.pmk-progress .pb > i { display: block; height: 100%; width: 64%; background: var(--accent); border-radius: 3px; }

/* ---------- Hotspots d'annotation ---------- */
.hotspot {
  position: absolute; z-index: 5;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--accent-dark);
  font: 800 12px/24px var(--font-body, 'Montserrat', sans-serif); text-align: center;
  box-shadow: 0 0 0 4px rgba(0, 210, 196, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5);
}
@keyframes hpulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(0, 210, 196, 0.25), 0 4px 10px rgba(0, 0, 0, 0.5); } 50% { box-shadow: 0 0 0 8px rgba(0, 210, 196, 0.12), 0 4px 10px rgba(0, 0, 0, 0.5); } }
.hotspot { animation: hpulse 2.4s ease-in-out infinite; }