/* MAMOUSSO V21 — panneau « Fichiers » dans Mes transcriptions (reprend les jetons --ui-*). */
.historyEntry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}
.historyEntry > .historyRow { min-width: 0; }
.mfToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid var(--ui-line, #e8e6dc);
  background: var(--ui-surface, #fff);
  color: var(--ui-text-2, #3d3929);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, box-shadow .2s;
}
.mfToggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.mfToggle:hover { border-color: var(--ui-line-strong, #d6d3c7); box-shadow: var(--ui-hover-shadow, none); }
.mfToggle:focus-visible { outline: none; box-shadow: var(--ui-ring); border-color: var(--ui-accent); }
.historyEntry.open .mfToggle { color: var(--ui-accent, #c96442); border-color: var(--ui-accent, #c96442); background: var(--ui-accent-soft, #f9ece4); }

.mfPanel {
  grid-column: 1 / -1;
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--ui-line, #e8e6dc);
  background: var(--ui-surface-2, #faf9f5);
  animation: appRise .3s var(--ui-ease, ease) both;
}
.mfPanel[hidden] { display: none; }
.mfLoading { color: var(--ui-muted, #73726c); font-size: 13.5px; }
.mfSection { display: grid; gap: 10px; }
.mfSection + .mfSection { padding-top: 14px; border-top: 1px solid var(--ui-line, #e8e6dc); }
.mfHead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mfKind {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--ui-accent, #c96442);
  background: var(--ui-accent-soft, #f9ece4);
}
.mfKind svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mfMeta { display: grid; gap: 2px; min-width: 0; }
.mfMeta b { font-size: 14px; font-weight: 600; color: var(--ui-text, #141413); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfMeta small { font-size: 12.5px; color: var(--ui-muted, #73726c); }
.mfLabel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ui-muted, #73726c); }
.mfActions { display: flex; flex-wrap: wrap; gap: 8px; }
.mfBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid var(--ui-line-strong, #d6d3c7);
  background: var(--ui-surface, #fff);
  color: var(--ui-text, #141413);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ui-btn-shadow, none);
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.mfBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mfBtn:hover { border-color: var(--ui-accent, #c96442); color: var(--ui-accent, #c96442); }
.mfBtn:active { transform: translateY(1px); }
.mfBtn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.mfBtn.primary { border-color: transparent; color: #fff; background: linear-gradient(180deg, var(--ui-grad-from, #dd805f), var(--ui-grad-to, #bf5a36)); }
.mfBtn.primary svg { fill: currentColor; stroke: none; }
.mfBtn.primary:hover { color: #fff; filter: brightness(1.05); }
.mfBtn.chip { min-height: 34px; padding: 0 11px; }
.mfBtn.danger { color: var(--ui-danger, #b42318); }
.mfBtn.danger:hover { border-color: var(--ui-danger, #b42318); background: var(--ui-danger-soft, #fef1ef); color: var(--ui-danger, #b42318); }
.mfBtn.ghostDanger { border-color: transparent; background: transparent; box-shadow: none; color: var(--ui-danger, #b42318); padding: 0 6px; }
.mfBtn.ghostDanger:hover { background: var(--ui-danger-soft, #fef1ef); border-color: transparent; }
.mfFooter { display: flex; justify-content: flex-end; padding-top: 4px; border-top: 1px dashed var(--ui-line, #e8e6dc); }
.mfPlayer { display: grid; gap: 6px; }
.mfPlayer[hidden] { display: none; }
.mfAudio { width: 100%; }
.mfVideo { width: 100%; max-height: 420px; border-radius: 12px; background: #000; }
.mfNote { margin: 0; font-size: 12.5px; color: var(--ui-muted, #73726c); }
.mfNote:empty { display: none; }
.mediaUsage { margin-top: 2px; font-size: 13px !important; }

@media (max-width: 720px) {
  .mfToggle span { display: none; }
  .mfToggle { padding: 0 12px; }
  .mfPanel { padding: 13px; }
  .mfBtn { flex: 1 1 auto; justify-content: center; }
  .mfBtn.ghostDanger { flex: 0 1 auto; }
}