/* ============================================================
   MAMOUSSO V21 — Bibliothèque « Mes transcriptions » (style Drive)
   Utilise les jetons --ui-* de static/app.css.
   ============================================================ */

.libCard svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- boutons ---------- */
.libBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--ui-line);
  border-radius: 11px;
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--ui-btn-shadow);
  transition: background .2s, border-color .2s, transform .2s var(--ui-ease), color .2s;
}
.libBtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.libBtn:hover { background: var(--ui-surface-2); border-color: var(--ui-line-strong); }
.libBtn:active { transform: translateY(1px); }
.libBtn:focus-visible, .libIconBtn:focus-visible, .libFolder:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.libBtnPrimary {
  border: 0;
  color: #fff;
  background: linear-gradient(180deg, var(--ui-grad-from), var(--ui-grad-to));
  box-shadow: 0 10px 22px -12px rgba(201, 100, 66, .7), 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.libBtnPrimary:hover { background: linear-gradient(180deg, var(--ui-grad-from), var(--ui-grad-to)); filter: brightness(1.05); }
.libBtnDanger { border-color: transparent; background: var(--ui-danger); color: #fff; }
.libBtnDanger:hover { background: var(--ui-danger); filter: brightness(1.08); border-color: transparent; }
:root[data-theme="dark"] .libBtnDanger { color: #2a1210; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .libBtnDanger { color: #2a1210; } }
.libBtnGhostDanger { color: var(--ui-danger); }
.libBtnGhostDanger:hover { background: var(--ui-danger-soft); border-color: transparent; }
.libIconBtn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
  transition: background .2s, color .2s;
}
.libIconBtn svg { width: 18px; height: 18px; }
.libIconBtn:hover { background: var(--ui-surface-3); color: var(--ui-text); }
.libMore svg { fill: currentColor; stroke: none; }

/* ---------- mise en page ---------- */
.appBody .libCard .historyCardHeader { align-items: center; }
.libLayout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.libFolders {
  position: sticky;
  top: 18px;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface-2);
}
.libFolder {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ui-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.libFolder svg { width: 18px; height: 18px; color: var(--ui-muted); }
.libFolder.isUser svg { color: var(--ui-accent); fill: var(--ui-accent-soft); }
.libFolder:hover { background: var(--ui-surface-3); }
.libFolder.isActive { background: var(--ui-accent-soft); color: var(--ui-text); font-weight: 600; }
.libFolder.isActive svg { color: var(--ui-accent); }
.libFolderName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libFolderCount {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ui-surface-3);
  color: var(--ui-muted);
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.libFolder.isActive .libFolderCount { background: var(--ui-surface); color: var(--ui-accent); }
.libFoldersLabel {
  margin: 12px 10px 4px;
  color: var(--ui-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.libFoldersSep { height: 1px; margin: 8px 6px; background: var(--ui-line); }
.libFolder.isTrash.isActive { background: var(--ui-danger-soft); }
.libFolder.isTrash.isActive svg, .libFolder.isTrash.isActive .libFolderCount { color: var(--ui-danger); }

.libMain { min-width: 0; }

/* ---------- barre d'outils ---------- */
.libToolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.libToolbar .libSearch { flex: 1 1 160px; width: auto; min-width: 0; }
.libToolbar .libSelect { flex: 0 1 auto; min-width: 0; max-width: 210px; }
.appBody .libToolbar .libSelect select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.libSelect {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding-left: 12px;
  border: 1px solid var(--ui-line-strong);
  border-radius: 12px;
  background: var(--ui-surface-2);
  color: var(--ui-muted);
  transition: border-color .2s, box-shadow .2s;
}
.libSelect:focus-within { border-color: var(--ui-accent); box-shadow: var(--ui-ring); }
.libSelect svg { width: 16px; height: 16px; flex: none; }
.appBody .libSelect select {
  width: auto;
  min-height: 0;
  height: 42px;
  padding: 0 30px 0 8px;
  border: 0;
  border-radius: 12px;
  background-color: transparent;
  box-shadow: none;
  color: var(--ui-text);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.libViewToggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface-3);
}
.libViewToggle button {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-muted);
  cursor: pointer;
}
.libViewToggle button svg { width: 18px; height: 18px; }
.libViewToggle button.isActive { background: var(--ui-surface); color: var(--ui-text); box-shadow: 0 1px 2px rgba(20, 20, 19, .08); }

.libViewHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.libViewTitle { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.libViewTitle h3 { margin: 0; font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libViewTitle small { color: var(--ui-muted); font-size: 13px; }
.libViewActions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- barre de sélection ---------- */
.libSelBar {
  position: sticky;
  top: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 35%, var(--ui-line));
  background: color-mix(in srgb, var(--ui-accent-soft) 70%, var(--ui-surface));
  box-shadow: var(--ui-hover-shadow);
  animation: appRise .25s var(--ui-ease) both;
}
.libSelBar[hidden] { display: none; }
.libSelBar strong { font-size: 14px; font-weight: 600; white-space: nowrap; }
.libSelActions { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- cases à cocher ---------- */
.libCheck { position: relative; display: grid; place-items: center; width: 22px; height: 22px; flex: none; cursor: pointer; }
.libCheck input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.libCheck i {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--ui-line-strong);
  background: var(--ui-surface);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.libCheck:hover i { border-color: var(--ui-accent); }
.libCheck input:focus-visible + i { box-shadow: var(--ui-ring); }
.libCheck input:checked + i,
.libCheck input:indeterminate + i {
  border-color: var(--ui-accent);
  background: var(--ui-accent) center / 12px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.libCheck input:indeterminate + i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.libCheck input:disabled + i { opacity: .4; }

/* ---------- liste ---------- */
.libListHead,
.mxTranscribe.appBody .libRow {
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr) 120px 104px 56px 100px 142px;
  align-items: center;
  gap: 10px;
}
.libListHead {
  padding: 0 14px 8px 14px;
  color: var(--ui-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.libListHead > span:nth-child(2) { grid-column: 3; }
.libListHead[hidden] { display: none; }
.appBody .libList { max-height: none; overflow: visible; }
.mxTranscribe.appBody .libRow { padding: 10px 8px 10px 14px; cursor: default; }
.mxTranscribe.appBody .libRow.isOpenable { cursor: pointer; }
.mxTranscribe.appBody .libRow:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.mxTranscribe.appBody .libRow.isSelected,
.mxTranscribe.appBody .libRow.isSelected:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 55%, var(--ui-line));
  background: var(--ui-accent-soft);
}
.mxTranscribe.appBody .libRow .historyRowText small { white-space: nowrap; }
.libRowIcon.isMuted { opacity: .55; }
.libNoAudio {
  display: inline-block;
  white-space: nowrap;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ui-surface-3);
  color: var(--ui-muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}
.libCell { min-width: 0; color: var(--ui-muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.libCellFolder { display: inline-flex; align-items: center; gap: 6px; }
.libCellFolder svg { width: 15px; height: 15px; flex: none; color: var(--ui-accent); }
.libCellFolder span { overflow: hidden; text-overflow: ellipsis; }
.libCellDur { font-variant-numeric: tabular-nums; }
.libDim { color: var(--ui-faint); }
/* En vue liste, la date et le dossier ont leurs colonnes : on allège la ligne de détails. */
.libCard:not(.libGrid) .libRow .historyRowText small { display: none; }
.libInTrash .libCellFolder { visibility: hidden; }

.libEmpty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 44px 20px !important;
  text-align: center;
}
.libEmpty svg { width: 34px; height: 34px; color: var(--ui-faint); margin-bottom: 4px; }
.libEmpty b { color: var(--ui-text); font-size: 15px; font-weight: 600; }
.libEmpty span { color: var(--ui-muted); font-size: 13.5px; max-width: 360px; }

/* ---------- grille (vue « Drive ») ---------- */
.libGrid .libListHead { display: none; }
.libGrid .libList {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.libGrid .libList .libEmpty { grid-column: 1 / -1; }
.mxTranscribe.appBody.appBody .libGrid .libRow {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  min-height: 168px;
}
.libGrid .libRow .libCheck { position: absolute; top: 12px; left: 12px; opacity: 0; transition: opacity .2s; }
.libGrid .libRow:hover .libCheck,
.libGrid .libRow.isSelected .libCheck,
.libHasSelection.libGrid .libRow .libCheck { opacity: 1; }
.libGrid .libRow .libRowActs { position: absolute; top: 8px; right: 8px; }
.mxTranscribe.appBody .libGrid .libRowIcon {
  width: 100%;
  height: 64px;
  border-radius: 12px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(224, 133, 99, .25), transparent 60%),
    var(--ui-accent-soft);
}
.mxTranscribe.appBody .libGrid .libRowIcon::before { width: 30px; height: 30px; }
.libGrid .historyRowText { width: 100%; }
.libGrid .historyRowText b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.libGrid .historyRowText small { white-space: normal !important; }
.libGrid .libCellFolder, .libGrid .libCellDate, .libGrid .libCellDur { display: none; }
.libGrid .libCellStatus { margin-top: auto; }

/* ---------- menu contextuel ---------- */
.libMenu {
  position: fixed;
  z-index: 1200;
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid var(--ui-line);
  background: var(--ui-surface);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .06);
  animation: appPop .18s var(--ui-ease) both;
}
.libMenu[hidden] { display: none; }
.libMenuItem {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ui-text-2);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.libMenuItem svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--ui-muted); }
.libMenuItem:hover, .libMenuItem:focus-visible { outline: none; background: var(--ui-surface-3); }
.libMenuItem.isDanger, .libMenuItem.isDanger svg { color: var(--ui-danger); }
.libMenuItem.isDanger:hover { background: var(--ui-danger-soft); }
.libMenuSep { height: 1px; margin: 5px 6px; background: var(--ui-line); }

/* ---------- fenêtre de dialogue ---------- */
.libDialog {
  width: min(440px, calc(100% - 28px));
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 22px;
  background: var(--ui-surface);
  color: var(--ui-text);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .45);
}
.libDialog[open] { animation: appPop .3s var(--ui-ease) both; }
.libDialog::backdrop { background: rgba(20, 18, 15, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.libDialogBox { padding: 26px 24px 20px; }
.libDialogIcon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
}
.libDialogIcon.isDanger { background: var(--ui-danger-soft); color: var(--ui-danger); }
.libDialogIcon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.libDialog h3 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; }
.libDialog p { margin: 0 0 16px; color: var(--ui-muted); font-size: 14px; line-height: 1.55; }
.libDialog p:empty { display: none; }
.libInput {
  width: 100%;
  height: 48px;
  margin-bottom: 4px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface-2);
  color: var(--ui-text);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.libInput:focus { border-color: var(--ui-accent); background: var(--ui-surface); box-shadow: var(--ui-ring); }
.libDialogActions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.libDialogActions .libBtn { height: 42px; padding: 0 16px; }
.libDialogActions .libBtn[hidden] { display: none; }
.libPick { display: grid; gap: 4px; max-height: 320px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; }
.libPickItem {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--ui-line);
  border-radius: 12px;
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.libPickItem svg { width: 18px; height: 18px; fill: none; stroke: var(--ui-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.libPickItem span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libPickItem:hover { border-color: var(--ui-accent); background: var(--ui-accent-soft); }
.libPickNew { border-style: dashed; color: var(--ui-accent); }
.libFormat {
  display: grid;
  place-items: center;
  width: 42px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  background: var(--ui-surface-3);
  color: var(--ui-text-2);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* ---------- notification ---------- */
.libToast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1300;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(560px, calc(100% - 24px));
  padding: 12px 12px 12px 18px;
  border-radius: 14px;
  background: #1f1c18;
  color: #fbf7ef;
  font-size: 14px;
  box-shadow: 0 20px 50px -14px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .25s, transform .25s var(--ui-ease);
}
.libToast[hidden] { display: none; }
.libToast.isOn { opacity: 1; transform: translate(-50%, 0); }
.libToast button {
  flex: none;
  padding: 7px 12px;
  border: 0;
  border-radius: 9px;
  background: rgba(255, 255, 255, .1);
  color: #f0a07f;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.libToast button:hover { background: rgba(255, 255, 255, .16); }

/* ---------- responsive ---------- */
@media (max-width: 1440px) {
  .libListHead,
  .mxTranscribe.appBody .libRow { grid-template-columns: 22px 40px minmax(0, 1fr) 104px 56px 100px 142px; }
  .libListHead > span:nth-child(3), .libCard:not(.libGrid) .libCellFolder { display: none; }
}
@media (max-width: 980px) {
  .libLayout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .libFolders {
    position: static;
    display: flex;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 -2px;
    padding: 2px;
  }
  .libFolders::-webkit-scrollbar { display: none; }
  .libFolder {
    display: inline-flex;
    width: auto;
    flex: none;
    padding: 8px 12px;
    border: 1px solid var(--ui-line);
    border-radius: 999px;
    background: var(--ui-surface);
  }
  .libFolder .libFolderName { max-width: 160px; }
  .libFoldersLabel { display: none; }
  .libFoldersSep { width: 1px; height: auto; margin: 6px 2px; flex: none; }
}
@media (max-width: 720px) {
  .libListHead { display: none; }
  .mxTranscribe.appBody .libRow { grid-template-columns: 22px 38px minmax(0, 1fr) auto auto; gap: 10px; padding: 10px 6px 10px 12px; }
  .libCard:not(.libGrid) .libCellDate,
  .libCard:not(.libGrid) .libCellDur { display: none; }
  .libCard:not(.libGrid) .libRow .historyRowText small { display: block; }
  .libCellStatus .historyBadge { padding: 4px 8px; font-size: 11px; }
  .libToolbar .libSearch { flex-basis: 100%; }
  .libSelect { flex: 1 1 0; min-width: 0; }
  .appBody .libSelect select { width: 100%; min-width: 0; }
  .libSelBar { flex-wrap: wrap; top: 8px; }
  .libSelActions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .libSelActions .libBtn span { display: none; }
  .libSelActions .libBtn { width: 40px; padding: 0; justify-content: center; }
  .libSelActions .libIconBtn { margin-left: auto; }
  .libGrid .libList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mxTranscribe.appBody.appBody .libGrid .libRow { min-height: 150px; padding: 12px; }
  .libGrid .libRow .libCheck { opacity: 1; }
  .appBody .libCard .historyCardHeader { align-items: flex-start; }
  .libDialogActions .libBtn { flex: 1; justify-content: center; }
}

/* Panneau « Fichiers » (fichier original) intégré à la liste */
.libRowActs { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.historyEntry.open .libFilesBtn { color: var(--ui-accent); background: var(--ui-accent-soft); }
.libList .historyEntry { display: block; }
.libList .historyEntry > .mfToggle { display: none; }
.libList .historyEntry > .mfPanel { margin: 8px 0 4px 34px; }
@media (max-width: 720px) {
  .libList .historyEntry > .mfPanel { margin-left: 0; }
}
.libMenu .libMenuItem { justify-content: flex-start; text-align: left; }
.libFilesBtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--ui-line-strong);
  background: var(--ui-surface);
  color: var(--ui-text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.libFilesBtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.libFilesBtn:hover { border-color: var(--ui-accent); color: var(--ui-accent); }
.libFilesBtn:focus-visible { outline: none; box-shadow: var(--ui-ring); }
.historyEntry.open .libFilesBtn { border-color: var(--ui-accent); }
@media (max-width: 720px) {
  .libFilesBtn { width: 36px; padding: 0; justify-content: center; }
  .libFilesBtn span { display: none; }
}