/* =====================================================
   GIRI DRIVE v3.0 — Premium Cloud Storage UI
   Namespace: .gd-*
   ===================================================== */

/* ─── Conteneur principal ────────────────────────────── */
.gd-container {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 100%;
}

/* ─── HERO HEADER ────────────────────────────────────── */
.gd-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 60%,
    transparent 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  flex-wrap: wrap;
}

.gd-hero::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

.gd-hero-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gd-hero-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  border-radius: 14px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary, #f1f5f9);
  margin: 0 0 0.2rem;
  letter-spacing: -0.02em;
}

/* ─── Breadcrumb ─────────────────────────────────────── */
.gd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.gd-bc-item {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  padding: 0.2rem 0.45rem;
  border-radius: 5px;
  transition: color 0.15s, background 0.15s;
}

.gd-bc-item:hover { color: rgba(255,255,255,0.85); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.gd-bc-active { color: var(--accent-light) !important; font-weight: 600; cursor: default; }
.gd-bc-root { color: rgba(255,255,255,0.5); }
.gd-bc-sep { color: rgba(255,255,255,0.18); font-size: 0.75rem; user-select: none; }

/* ─── Boutons hero ────────────────────────────────────── */
.gd-hero-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.gd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.52rem 1.05rem;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: transform 0.2s cubic-bezier(0.4,0,0.2,1), background 0.2s ease-out, border-color 0.2s ease-out, opacity 0.2s ease-out;
  white-space: nowrap;
  line-height: 1;
}

.gd-btn-primary {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 55%, transparent);
  filter: brightness(1.08);
}

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

.gd-btn-ghost {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.1);
}

.gd-btn-ghost:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-light);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  transform: translateY(-1px);
}

/* ─── QUOTA BAR ──────────────────────────────────────── */
.gd-quota-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
}

.gd-quota-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 99px;
  overflow: hidden;
}

.gd-quota-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent));
  border-radius: 99px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}

.gd-quota-fill.gd-quota-warn {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.gd-quota-fill.gd-quota-critical {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: gdQuotaPulse 2s ease infinite;
}

.gd-quota-fill.gd-quota-infinite {
  background: transparent;
}

@keyframes gdQuotaPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.75; }
}

.gd-quota-label {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.42);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ─── TOOLBAR ────────────────────────────────────────── */
.gd-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* Search */
.gd-search-wrap {
  flex: 1;
  min-width: 180px;
  position: relative;
  display: flex;
  align-items: center;
}

.gd-search-icon {
  position: absolute;
  left: 0.75rem;
  color: rgba(255,255,255,0.35);
  pointer-events: none;
  flex-shrink: 0;
}

.gd-search-input {
  width: 100%;
  padding: 0.52rem 2.2rem 0.52rem 2.1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 10px;
  color: rgba(255,255,255,0.85);
  font-size: 0.83rem;
  outline: none;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.gd-search-input::placeholder { color: rgba(255,255,255,0.3); }

.gd-search-input:focus {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

.gd-search-clear {
  position: absolute;
  right: 0.6rem;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gd-search-clear:hover { background: rgba(255,255,255,0.18); color: #fff; }

/* Toolbar right */
.gd-toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

/* Sort */
.gd-sort-wrap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.6rem 0.3rem 0.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  transition: border-color 0.15s;
}

.gd-sort-wrap:focus-within {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-sort-select {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  outline: none;
  padding: 0;
}

.gd-sort-select option { background: #14141f; color: #fff; }

/* View toggle */
.gd-view-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 9px;
  padding: 2px;
}

.gd-view-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: rgba(255,255,255,0.38);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.gd-view-btn:hover { color: rgba(255,255,255,0.7); }
.gd-view-btn.active {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent-light);
}

/* ─── Stats bar ──────────────────────────────────────── */
.gd-stats-bar {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  min-height: 24px;
}

.gd-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: rgba(255,255,255,0.45);
  padding: 0.22rem 0.55rem;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
}

.gd-stat-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.gd-stat-sep { color: rgba(255,255,255,0.12); font-size: 0.85rem; }

/* ─── Barre de progression upload ───────────────────── */
.gd-upload-progress {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.65rem 1rem;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 10px;
  animation: gdFadeIn 0.2s ease;
}

.gd-upload-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}

.gd-upload-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-light), var(--accent), #06b6d4);
  border-radius: 99px;
  transition: width 0.3s ease;
  background-size: 200% 100%;
  animation: gdBarShimmer 1.5s linear infinite;
}

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

.gd-upload-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
}

/* ─── Zone de dépôt ──────────────────────────────────── */
.gd-drop-zone {
  border: 2px dashed transparent;
  border-radius: 16px;
  transition: border-color 0.2s, background 0.2s;
  min-height: 300px;
  position: relative;
}

.gd-drag-over {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
  animation: gdDashAnim 0.6s linear infinite;
}

.gd-drag-over::after {
  content: '📁 Déposer ici pour uploader';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--accent-light);
  font-size: 1.4rem;
  font-weight: 700;
  pointer-events: none;
  background: rgba(10,10,20,0.88);
  padding: 1.2rem 2.2rem;
  border-radius: 14px;
  border: 2px dashed color-mix(in srgb, var(--accent) 60%, transparent);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--accent) 25%, transparent);
}

@keyframes gdDashAnim {
  0%   { border-color: var(--accent-light); }
  50%  { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
  100% { border-color: var(--accent-light); }
}

/* ─── GRILLE fichiers ────────────────────────────────── */
.gd-files-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 1rem;
  padding: 0.25rem;
}

/* ─── Carte fichier (vue grille) ─────────────────────── */
.gd-file-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255,255,255,0.028);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.4,0,0.2,1), box-shadow 0.22s, border-color 0.22s;
  animation: gdCardIn 0.35s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes gdCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gd-file-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent),
    0 4px 12px rgba(0,0,0,0.3);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}

.gd-file-card:hover .gd-card-actions { opacity: 1; transform: translateY(0); }

/* Dossier — teinte dorée subtile */
.gd-folder-card { border-color: rgba(245,158,11,0.12); }
.gd-folder-card:hover {
  box-shadow: 0 12px 32px rgba(245,158,11,0.14), 0 4px 12px rgba(0,0,0,0.3);
  border-color: rgba(245,158,11,0.32);
}

/* ─── Thumbnail ──────────────────────────────────────── */
.gd-card-preview {
  width: 100%;
  aspect-ratio: 1 / 0.85;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.gd-card-thumb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-card-thumb[style*="background-image"] {
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease;
}

.gd-file-card:hover .gd-card-thumb[style*="background-image"] {
  transform: scale(1.04);
}

.gd-card-thumb-icon {
  font-size: 2.8rem;
  background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--icon-color, var(--accent-light)) 18%, transparent), transparent 70%);
  position: relative;
}

.gd-card-thumb-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 62% 68%, rgba(0,0,0,0.18), transparent 60%);
}

.gd-card-thumb-video {
  background: linear-gradient(135deg, #1e1b4b, #0f172a);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gd-play-icon {
  width: 44px;
  height: 44px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #fff;
  padding-left: 3px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 50%, transparent);
  transition: transform 0.2s, box-shadow 0.2s;
}

.gd-file-card:hover .gd-play-icon {
  transform: scale(1.1);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* ─── Infos carte ────────────────────────────────────── */
.gd-card-info {
  padding: 0.6rem 0.7rem 0.4rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.gd-card-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-card-size {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
  margin-top: 0.15rem;
}

/* ─── Actions carte ──────────────────────────────────── */
.gd-card-actions {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.35rem 0.4rem;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.18s, transform 0.18s;
}

.gd-icon-btn {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.15s;
  flex-shrink: 0;
}

.gd-icon-btn:hover { background: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent-light); transform: scale(1.1); }
.gd-icon-btn-del:hover { background: rgba(239,68,68,0.18) !important; color: #f87171 !important; }

/* ─── VUE LISTE ──────────────────────────────────────── */
.gd-files-list {
  display: flex !important;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.25rem;
  grid-template-columns: unset !important;
}

.gd-list-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 1rem;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
  animation: gdListIn 0.28s cubic-bezier(0.4,0,0.2,1) both;
}

@keyframes gdListIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.gd-list-row:hover {
  background: rgba(255,255,255,0.05);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  transform: translateX(3px);
}

.gd-folder-row { border-color: rgba(245,158,11,0.1); }
.gd-folder-row:hover { border-color: rgba(245,158,11,0.28); }

.gd-list-row:hover .gd-list-actions { opacity: 1; }

.gd-list-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}

.gd-list-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.gd-list-name-text {
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-list-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-shrink: 0;
}

.gd-list-size {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.32);
  min-width: 60px;
  text-align: right;
}

.gd-list-date {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.26);
  min-width: 90px;
  text-align: right;
}

.gd-list-actions {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
  transition: opacity 0.18s;
  flex-shrink: 0;
}

/* ─── États vide / erreur / loading ─────────────────── */
.gd-loading, .gd-empty, .gd-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 4.5rem 2rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* Pour vue liste */
.gd-files-list .gd-empty,
.gd-files-list .gd-loading,
.gd-files-list .gd-error {
  width: 100%;
}

.gd-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid color-mix(in srgb, var(--accent) 14%, transparent);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: gdSpin 0.75s linear infinite;
}

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

.gd-empty-icon { opacity: 0.28; margin-bottom: 0.4rem; }
.gd-empty-title { font-size: 0.98rem; font-weight: 600; color: rgba(255,255,255,0.42); }
.gd-empty-hint { font-size: 0.8rem; color: rgba(255,255,255,0.25); max-width: 270px; line-height: 1.55; }
.gd-empty-hint strong { color: var(--accent-light); }

.gd-error-icon { font-size: 2.5rem; opacity: 0.55; }
.gd-error p { font-size: 0.88rem; }

/* ─── Partage — Badge & Modal ─────────────────────────── */
.gd-share-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-light), #06b6d4);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 20px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Modal Prévisualisation ─────────────────────────── */
.gd-preview-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
}

.gd-preview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
}

.gd-preview-panel {
  position: relative;
  z-index: 1;
  width: 90vw;
  max-width: 1100px;
  max-height: 92vh;
  background: rgba(12,12,22,0.97);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.22s ease;
}

.gd-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  background: rgba(255,255,255,0.02);
}

.gd-preview-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-preview-hdr-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.gd-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.38rem 0.8rem;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out;
}

.gd-preview-btn:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-light); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.gd-preview-close-btn:hover { background: rgba(239,68,68,0.14); color: #f87171; border-color: rgba(239,68,68,0.28); }

.gd-preview-body {
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: rgba(0,0,0,0.15);
}

.gd-preview-img { max-width: 100%; max-height: 76vh; object-fit: contain; border-radius: 0 0 14px 14px; }
.gd-preview-video { width: 100%; max-height: 76vh; border-radius: 0 0 14px 14px; }
.gd-preview-iframe { width: 100%; height: 72vh; border: none; }
.gd-preview-bunny-wrap { width: 100%; aspect-ratio: 16/9; max-height: 72vh; background: #000; border-radius: 0 0 14px 14px; overflow: hidden; }
.gd-preview-bunny-iframe { width: 100%; height: 100%; border: none; display: block; }

.gd-preview-audio-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 2rem;
}

.gd-preview-audio-icon { font-size: 4rem; opacity: 0.65; }
.gd-preview-audio-name { font-size: 1rem; font-weight: 600; color: rgba(255,255,255,0.65); text-align: center; }
.gd-preview-audio { width: 100%; max-width: 400px; }

.gd-preview-nope {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 3rem;
  text-align: center;
}

.gd-preview-nope-icon { font-size: 4rem; }
.gd-preview-nope-hint { font-size: 0.8rem; color: rgba(255,255,255,0.32); margin-bottom: 0.5rem; }

/* ─── Modal Nouveau Dossier ──────────────────────────── */
.gd-newfolder-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9300;
}

.gd-newfolder-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(8px);
}

.gd-newfolder-panel {
  position: relative;
  z-index: 1;
  background: var(--bg-card, rgba(14,14,24,0.98));
  backdrop-filter: blur(28px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 22px;
  padding: 2rem 2rem 1.6rem;
  width: 380px;
  max-width: 92vw;
  box-shadow:
    0 32px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04),
    0 0 60px color-mix(in srgb, var(--accent) 12%, transparent);
  animation: gdFadeIn 0.18s ease;
  text-align: center;
}

.gd-newfolder-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 15%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: var(--accent-light, #a78bfa);
}

.gd-newfolder-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, rgba(255,255,255,0.92));
  margin: 0 0 0.3rem;
  letter-spacing: -0.02em;
}

.gd-newfolder-sub {
  font-size: 0.78rem;
  color: var(--text-muted, rgba(255,255,255,0.4));
  margin: 0 0 1.3rem;
}

.gd-newfolder-path {
  color: var(--accent-light, #a78bfa);
  font-weight: 600;
}

.gd-newfolder-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 1rem;
  background: color-mix(in srgb, var(--accent) 6%, rgba(255,255,255,0.04));
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,0.1));
  border-radius: 11px;
  color: var(--text, rgba(255,255,255,0.9));
  font-size: 0.9rem;
  font-weight: 500;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  margin-bottom: 1.2rem;
  text-align: left;
}

.gd-newfolder-input::placeholder { color: rgba(255,255,255,0.3); }

.gd-newfolder-input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.gd-newfolder-input--error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.14) !important;
  animation: gdShake 0.28s ease;
}

@keyframes gdShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.gd-newfolder-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: flex-end;
}

.gd-newfolder-actions .gd-btn-primary {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ─── Modal Déplacement ──────────────────────────────── */
.gd-move-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9100;
}

.gd-move-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.gd-move-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 18px;
  padding: 1.5rem;
  width: 340px;
  max-width: 90vw;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.2s ease;
}

.gd-move-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.1rem;
}

.gd-move-title svg { color: var(--accent-light); }

.gd-move-select {
  width: 100%;
  padding: 0.6rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 9px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  margin-bottom: 1rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}

.gd-move-select:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.gd-move-select option { background: #12121e; color: #fff; }

.gd-move-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }

/* ─── Modal Partage ──────────────────────────────────── */
.gd-share-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9200;
}

.gd-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.76);
  backdrop-filter: blur(6px);
}

.gd-share-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 20px;
  padding: 1.8rem;
  width: 420px;
  max-width: 94vw;
  box-shadow:
    0 24px 80px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 0 1px rgba(255,255,255,0.03);
  animation: gdFadeIn 0.22s ease;
}

.gd-share-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 1.2rem;
}

.gd-share-url-row { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

.gd-share-url-input {
  flex: 1;
  padding: 0.52rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  font-family: monospace;
  outline: none;
}

.gd-share-copy-btn {
  padding: 0.52rem 0.9rem;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 9px;
  color: var(--accent-light);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.gd-share-copy-btn:hover { background: color-mix(in srgb, var(--accent) 35%, transparent); }

.gd-share-expiry-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.48);
}

.gd-share-expiry-btn {
  padding: 0.28rem 0.65rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 6px;
  color: rgba(255,255,255,0.65);
  font-size: 0.77rem;
  cursor: pointer;
  transition: transform 0.15s ease-out, background 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out, opacity 0.15s ease-out;
}

.gd-share-expiry-btn:hover,
.gd-share-expiry-btn.active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-light);
}

.gd-share-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gd-share-disable-btn {
  padding: 0.38rem 0.8rem;
  background: rgba(239,68,68,0.09);
  border: 1px solid rgba(239,68,68,0.22);
  border-radius: 7px;
  color: #f87171;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.15s;
}

.gd-share-disable-btn:hover { background: rgba(239,68,68,0.18); }

/* ─── Drive Picker (dans Messaging) ──────────────────── */
.gd-picker-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9300;
}

.gd-picker-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(6px);
}

.gd-picker-panel {
  position: relative;
  z-index: 1;
  background: rgba(14,14,24,0.98);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 20px;
  padding: 1.5rem;
  width: 480px;
  max-width: 94vw;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5);
  animation: gdFadeIn 0.22s ease;
}

.gd-picker-title {
  font-size: 1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin: 0 0 0.9rem;
}

.gd-picker-search {
  width: 100%;
  padding: 0.52rem 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px;
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
  outline: none;
  margin-bottom: 0.8rem;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.gd-picker-search:focus { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }

.gd-picker-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.gd-picker-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.52rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}

.gd-picker-item:hover { background: rgba(255,255,255,0.05); }
.gd-picker-item.selected {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.gd-picker-icon { font-size: 1.2rem; }
.gd-picker-name { flex: 1; font-size: 0.84rem; color: rgba(255,255,255,0.82); }
.gd-picker-size { font-size: 0.74rem; color: rgba(255,255,255,0.36); }

.gd-picker-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
}

/* ─── Animations globales ────────────────────────────── */
@keyframes gdFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .gd-container { padding: 1rem; }
  .gd-hero { padding: 1rem 1.1rem; }
  .gd-hero-icon { width: 40px; height: 40px; border-radius: 12px; }
  .gd-title { font-size: 1.2rem; }
  .gd-btn span { display: none; }
  .gd-btn { padding: 0.5rem 0.65rem; }
  .gd-files-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 0.7rem; }
  .gd-preview-panel { width: 96vw; max-height: 90vh; }
  .gd-list-meta { display: none; }
  .gd-toolbar { flex-direction: column; align-items: stretch; }
  .gd-toolbar-right { justify-content: flex-end; }
}

@media (max-width: 480px) {
  .gd-files-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gd-quota-label { display: none; }
}

/* =============================================================
   GIRI DRIVE — Video Upload Panel (GiriDriveVideos)
   Namespace: .gdv-*
   ============================================================= */

/* ── Panel container ──────────────────────────────────────── */
.gdv-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

/* ── Header ───────────────────────────────────────────────── */
.gdv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.6rem;
  background: linear-gradient(135deg,
    color-mix(in oklch, var(--accent, #8b5cf6) 12%, transparent),
    color-mix(in oklch, var(--accent, #8b5cf6) 4%, transparent) 60%,
    transparent);
  border: 1px solid color-mix(in oklch, var(--accent, #8b5cf6) 20%, transparent);
  border-radius: 18px;
  flex-wrap: wrap;
}

.gdv-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.gdv-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: color-mix(in oklch, var(--accent, #8b5cf6) 18%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #8b5cf6);
  flex-shrink: 0;
}

.gdv-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--text, #fff);
}

.gdv-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
  margin: 0.15rem 0 0;
}

.gdv-header-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────────────── */
.gdv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1;
}
.gdv-btn:active { transform: scale(0.97); }
.gdv-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.gdv-btn-primary {
  background: var(--accent, #8b5cf6);
  color: #fff;
}
.gdv-btn-primary:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent, #8b5cf6) 85%, #fff 15%);
}

.gdv-btn-ghost {
  background: color-mix(in oklch, var(--accent, #8b5cf6) 10%, transparent);
  color: var(--text, #e2e8f0);
  border: 1px solid color-mix(in oklch, var(--accent, #8b5cf6) 20%, transparent);
}
.gdv-btn-ghost:hover:not(:disabled) {
  background: color-mix(in oklch, var(--accent, #8b5cf6) 18%, transparent);
}

.gdv-btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  border-radius: 7px;
}

/* ── Folder select ────────────────────────────────────────── */
.gdv-folder-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: color-mix(in oklch, #fff 6%, transparent);
  border: 1px solid color-mix(in oklch, #fff 10%, transparent);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
}

.gdv-folder-icon { color: #f59e0b; flex-shrink: 0; }

.gdv-folder-select {
  background: none;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 0.82rem;
  cursor: pointer;
  max-width: 200px;
}
.gdv-folder-select option {
  background: #1a1d27;
  color: #e2e8f0;
}

/* ── Library toolbar ──────────────────────────────────────── */
.gdv-library-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Queue folder badge ───────────────────────────────────── */
.gdv-queue-folder {
  font-size: 0.7rem;
  color: #f59e0b;
  opacity: 0.8;
}

/* ── Drop Zone ────────────────────────────────────────────── */
.gdv-drop-zone {
  border: 2px dashed color-mix(in oklch, var(--accent, #8b5cf6) 30%, transparent);
  border-radius: 16px;
  padding: 3rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, background 0.2s;
  cursor: pointer;
}
.gdv-drop-zone:hover,
.gdv-drop-zone.gdv-dz-hover {
  border-color: var(--accent, #8b5cf6);
  background: color-mix(in oklch, var(--accent, #8b5cf6) 6%, transparent);
}

.gdv-drop-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}
.gdv-drop-inner .gdv-btn { pointer-events: auto; }

.gdv-drop-icon { color: var(--accent, #8b5cf6); opacity: 0.7; }
.gdv-drop-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  margin: 0;
}
.gdv-drop-hint {
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
  margin: 0 0 0.4rem;
}

/* ── Section title ────────────────────────────────────────── */
.gdv-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-muted, #9ca3af);
}

/* ── Upload Queue ─────────────────────────────────────────── */
.gdv-queue {
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.4rem;
  background: color-mix(in oklch, #fff 3%, transparent);
  border: 1px solid color-mix(in oklch, #fff 8%, transparent);
  border-radius: 14px;
}

.gdv-queue-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gdv-queue-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: color-mix(in oklch, #fff 4%, transparent);
  border: 1px solid color-mix(in oklch, #fff 7%, transparent);
  transition: background 0.15s;
}
.gdv-queue-row-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.gdv-queue-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: color-mix(in oklch, var(--accent, #8b5cf6) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent, #8b5cf6);
  flex-shrink: 0;
}

.gdv-queue-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gdv-queue-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gdv-queue-size {
  font-size: 0.73rem;
  color: var(--text-muted, #9ca3af);
}

.gdv-queue-progress-track {
  height: 28px;
  background: color-mix(in oklch, #fff 8%, transparent);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}

.gdv-queue-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #8b5cf6), color-mix(in oklch, var(--accent, #8b5cf6) 60%, #06b6d4 40%));
  border-radius: 10px;
  transition: width 0.3s ease;
  width: 0%;
  position: relative;
  box-shadow: 0 0 12px color-mix(in oklch, var(--accent, #8b5cf6) 40%, transparent);
}
.gdv-queue-progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  z-index: 1;
  letter-spacing: 0.02em;
  pointer-events: none;
}
.gdv-queue-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, #9ca3af);
}
.gdv-queue-detail-row span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.gdv-queue-speed { color: var(--accent, #8b5cf6); font-weight: 600; }
.gdv-queue-eta { color: #22c55e; font-weight: 600; }

.gdv-queue-status {
  font-size: 0.78rem;
  color: var(--text-muted, #9ca3af);
  white-space: nowrap;
  flex-shrink: 0;
}

.gdv-status-done   .gdv-queue-status { color: #22c55e; }
.gdv-status-error  .gdv-queue-status { color: #ef4444; }
.gdv-status-uploading .gdv-queue-status { color: var(--accent, #8b5cf6); }

.gdv-queue-remove {
  background: none;
  border: none;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.gdv-queue-remove:hover { opacity: 1; color: #ef4444; }

/* ── Library ──────────────────────────────────────────────── */
.gdv-library {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gdv-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.gdv-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: color-mix(in oklch, #fff 6%, transparent);
  border: 1px solid color-mix(in oklch, #fff 10%, transparent);
  border-radius: 10px;
  padding: 0.45rem 0.8rem;
}
.gdv-search-icon { color: var(--text-muted, #9ca3af); flex-shrink: 0; }
.gdv-search-input {
  background: none;
  border: none;
  outline: none;
  color: var(--text, #e2e8f0);
  font-size: 0.84rem;
  width: 180px;
}
.gdv-search-input::placeholder { color: var(--text-muted, #9ca3af); }

/* ── Video Grid ───────────────────────────────────────────── */
.gdv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* ── Video Card ───────────────────────────────────────────── */
.gdv-card {
  background: color-mix(in oklch, #fff 5%, transparent);
  border: 1px solid color-mix(in oklch, #fff 9%, transparent);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.gdv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px color-mix(in oklch, var(--accent, #8b5cf6) 20%, transparent);
  border-color: color-mix(in oklch, var(--accent, #8b5cf6) 30%, transparent);
}

.gdv-card-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #0f172a;
  overflow: hidden;
}

.gdv-card-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.gdv-card:hover .gdv-card-thumb-img { transform: scale(1.04); }

.gdv-card-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted, #9ca3af);
}

.gdv-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.2s;
  border: none;
  cursor: pointer;
  color: #fff;
}
.gdv-card:hover .gdv-card-play { opacity: 1; }
.gdv-card-play svg { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6)); transition: transform 0.15s; }
.gdv-card:hover .gdv-card-play svg { transform: scale(1.15); }

.gdv-card-dur {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.gdv-card-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.gdv-badge-ready      { background: #16a34a; color: #fff; }
.gdv-badge-error      { background: #dc2626; color: #fff; }
.gdv-badge-processing { background: rgba(0,0,0,0.55); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.15); }

.gdv-card-body {
  padding: 0.75rem 0.9rem;
}

.gdv-card-title {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  margin: 0 0 0.35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-wrap: balance;
}

.gdv-card-meta {
  display: flex;
  gap: 0.6rem;
  font-size: 0.71rem;
  color: var(--text-muted, #9ca3af);
}

.gdv-card-actions-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
  flex-wrap: wrap;
}

.gdv-card-delete {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted, #9ca3af);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.15s, color 0.15s;
}
.gdv-card-delete:hover { opacity: 1; color: #ef4444; }

.gdv-card-encoding {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(0,0,0,0.55);
}

.gdv-card-encoding-label {
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Spinners ─────────────────────────────────────────────── */
.gdv-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid color-mix(in oklch, var(--accent, #8b5cf6) 25%, transparent);
  border-top-color: var(--accent, #8b5cf6);
  border-radius: 50%;
  animation: gdv-spin 0.7s linear infinite;
}
.gdv-spinner-sm {
  width: 20px;
  height: 20px;
  border-width: 2px;
}
@keyframes gdv-spin { to { transform: rotate(360deg); } }

/* ── Loading / Empty ──────────────────────────────────────── */
.gdv-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 2rem;
  color: var(--text-muted, #9ca3af);
  font-size: 0.85rem;
}

.gdv-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-muted, #9ca3af);
  font-size: 0.88rem;
}
.gdv-empty-hint {
  font-size: 0.78rem;
  opacity: 0.7;
}

/* ── Pagination ───────────────────────────────────────────── */
.gdv-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-top: 0.5rem;
}
.gdv-pag-info {
  font-size: 0.8rem;
  color: var(--text-muted, #9ca3af);
  font-variant-numeric: tabular-nums;
}
.gdv-pag-btn { padding: 0.45rem 0.9rem; font-size: 0.82rem; }

/* ── Player Modal ─────────────────────────────────────────── */
.gdv-player-modal {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.gdv-player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.gdv-player-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  background: #0f172a;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.gdv-player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.gdv-player-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gdv-player-close {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.gdv-player-close:hover { color: #fff; background: rgba(255,255,255,0.08); }

.gdv-player-body {
  flex: 1;
  position: relative;
  background: #000;
  aspect-ratio: 16/9;
  max-height: 60vh;
}

.gdv-player-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.gdv-player-nourl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #9ca3af;
  font-size: 0.88rem;
}

.gdv-player-meta {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.78rem;
  color: #9ca3af;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ── Tabs integration (gd-tabs) ─────────────────────────── */
.gd-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid color-mix(in oklch, #fff 8%, transparent);
  margin-bottom: 0;
}

.gd-tab {
  padding: 0.6rem 1.1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted, #9ca3af);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: -1px;
}
.gd-tab:hover { color: var(--text, #e2e8f0); }
.gd-tab.active {
  color: var(--accent, #8b5cf6);
  border-bottom-color: var(--accent, #8b5cf6);
}

.gd-tab-panel { display: none; }
.gd-tab-panel.active { display: block; }

/* ─── MULTI-SÉLECTION & RUBBER-BAND ─────────────────────────────────────────── */

/* Rubber-band rectangle */
.gd-rubber-band {
  position: fixed;
  z-index: 9999;
  background: color-mix(in srgb, var(--accent, #8b5cf6) 18%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent, #8b5cf6) 70%, transparent);
  border-radius: 4px;
  pointer-events: none;
  will-change: auto; /* was left,top,width,height — non-compositable */
}

/* Drop-zone should not select text while rubber-banding */
.gd-drop-zone {
  user-select: none;
}

/* Checkbox overlay on cards */
.gd-card-checkbox,
.gd-list-checkbox {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(20, 20, 32, 0.75);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.15s, transform 0.15s, background 0.15s, border-color 0.15s;
  backdrop-filter: blur(4px);
  flex-shrink: 0;
}

.gd-list-checkbox {
  position: static;
  opacity: 0;
  transform: scale(0.85);
  margin-right: 0.25rem;
}

.gd-card-checkbox .gd-cb-icon,
.gd-list-checkbox .gd-cb-icon {
  opacity: 0;
  transition: opacity 0.1s;
}

/* Show checkbox on hover */
.gd-file-card:hover .gd-card-checkbox,
.gd-folder-card:hover .gd-card-checkbox,
.gd-list-row:hover .gd-list-checkbox {
  opacity: 1;
  transform: scale(1);
}

/* Selected state */
.gd-file-card.gd-selected,
.gd-folder-card.gd-selected,
.gd-list-row.gd-selected {
  background: color-mix(in srgb, var(--accent, #8b5cf6) 14%, var(--surface-2, rgba(255,255,255,0.04)));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #8b5cf6) 60%, transparent), 0 4px 16px rgba(0,0,0,0.1);
}

.gd-file-card.gd-selected .gd-card-checkbox,
.gd-folder-card.gd-selected .gd-card-checkbox,
.gd-list-row.gd-selected .gd-list-checkbox {
  opacity: 1;
  transform: scale(1);
  background: var(--accent, #8b5cf6);
  border-color: var(--accent, #8b5cf6);
}

.gd-file-card.gd-selected .gd-cb-icon,
.gd-folder-card.gd-selected .gd-cb-icon,
.gd-list-row.gd-selected .gd-cb-icon {
  opacity: 1;
  color: #fff;
}

/* Keep cards position:relative for checkbox overlay */
.gd-file-card,
.gd-folder-card {
  position: relative;
}

/* Drag & drop — folder drop target highlight */
.gd-folder-card.gd-folder-drop-over,
.gd-folder-row.gd-folder-drop-over {
  background: color-mix(in srgb, #f59e0b 18%, var(--surface-2, rgba(255,255,255,0.04)));
  box-shadow: 0 0 0 2px #f59e0b, 0 4px 20px rgba(245,158,11,0.25);
  transform: scale(1.02);
  transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}

/* Make draggable selected items slightly transparent while dragging */
.gd-file-card[draggable="true"].gd-selected:active,
.gd-folder-card[draggable="true"].gd-selected:active,
.gd-list-row[draggable="true"].gd-selected:active {
  opacity: 0.6;
}

/* ─── BULK ACTION BAR ─────────────────────────────────────────────────────────── */

.gd-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  margin-bottom: 0.75rem;
  background: color-mix(in srgb, var(--accent, #8b5cf6) 12%, rgba(14,14,24,0.95));
  border: 1px solid color-mix(in srgb, var(--accent, #8b5cf6) 35%, transparent);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  animation: gdBulkIn 0.2s cubic-bezier(0.4,0,0.2,1);
  flex-wrap: wrap;
}

@keyframes gdBulkIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gd-bulk-count {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--accent-light, #a78bfa);
  white-space: nowrap;
  flex-shrink: 0;
}

.gd-bulk-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.gd-bulk-btn {
  font-size: 0.79rem;
  padding: 0.38rem 0.8rem;
  border-radius: 8px;
}

.gd-bulk-btn-del {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.gd-bulk-btn-del:hover {
  background: rgba(239, 68, 68, 0.28);
  color: #fca5a5;
  border-color: rgba(239, 68, 68, 0.55);
  transform: translateY(-1px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .gdv-panel { padding: 1rem; }
  .gdv-header { padding: 1rem; }
  .gdv-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .gdv-player-panel { max-width: 100%; border-radius: 14px; }
  .gdv-drop-zone { padding: 2rem 1rem; }
}

@media (max-width: 480px) {
  .gdv-grid { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .gdv-search-input { width: 120px; }
  .gdv-library-header { flex-direction: column; align-items: flex-start; }
}

/* =============================================================
   GIRI DRIVE v3.2 — Nouveaux styles : Corbeille, Inline Rename,
   PDF Viewer, Miniature, Tab badge
   ============================================================= */

/* ─── Onglet Corbeille ────────────────────────────── */
.gd-tab-trash { opacity: 0.75; }
.gd-tab-trash:hover { opacity: 1; }
.gd-tab-trash.active { opacity: 1; }

.gd-trash-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 9px;
  margin-left: 4px;
  line-height: 1;
}

/* ─── Header corbeille ────────────────────────────── */
.gd-trash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.gd-trash-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.5);
  font-size: 0.85rem;
}

/* ─── Bouton danger ────────────────────────────────── */
.gd-btn-danger {
  background: rgba(239,68,68,0.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,0.25);
}
.gd-btn-danger:hover {
  background: rgba(239,68,68,0.22);
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}

.gd-btn-sm {
  padding: 0.3rem 0.6rem;
  font-size: 0.75rem;
  border-radius: 7px;
}

/* ─── Grille corbeille ────────────────────────────── */
.gd-trash-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.gd-trash-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  transition: background 0.15s;
}
.gd-trash-card:hover { background: rgba(255,255,255,0.06); }

.gd-trash-icon { font-size: 1.5rem; flex-shrink: 0; }

.gd-trash-info-col {
  flex: 1;
  min-width: 0;
}

.gd-trash-name {
  font-size: 0.88rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gd-trash-meta {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
  margin-top: 2px;
}

.gd-trash-actions {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.gd-trash-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 4rem 1rem;
  color: rgba(255,255,255,0.3);
  text-align: center;
}
.gd-trash-empty-icon { font-size: 3rem; opacity: 0.4; }

/* ─── Inline rename ───────────────────────────────── */
.gd-inline-rename {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--accent, #7c3aed);
  border-radius: 5px;
  color: #fff;
  font-size: 0.78rem;
  padding: 2px 5px;
  outline: none;
  font-family: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #7c3aed) 20%, transparent);
}

/* ─── PDF viewer amélioré ─────────────────────────── */
.gd-preview-pdf-wrap {
  width: 100%;
  height: 78vh;
  background: #fff;
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.gd-preview-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ─── Miniature bouton vidéo ──────────────────────── */
.gdv-btn-thumb {
  opacity: 0.7;
  transition: opacity 0.15s;
}
.gdv-btn-thumb:hover { opacity: 1; }

/* ─── Miniatures améliorées v4 — lazy <img> + placeholder ─── */
.gd-card-thumb-has-img {
  position: relative;
  overflow: hidden;
}

.gd-card-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}

.gd-thumb-loaded .gd-card-thumb-img {
  opacity: 1;
}

.gd-thumb-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    var(--bg-tertiary, #1a1a2e) 0%,
    color-mix(in srgb, var(--accent, #6366f1) 8%, var(--bg-tertiary, #1a1a2e)) 50%,
    var(--bg-tertiary, #1a1a2e) 100%
  );
  background-size: 200% 200%;
  animation: gdThumbShimmer 1.8s ease-in-out infinite;
  border-radius: 12px 12px 0 0;
  z-index: 1;
  transition: opacity 0.4s ease 0.1s;
}

.gd-thumb-loaded .gd-thumb-placeholder {
  opacity: 0;
  pointer-events: none;
}

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

/* Hover zoom sur img au lieu de background */
.gd-file-card:hover .gd-card-thumb-img {
  transform: scale(1.05);
  transition: opacity 0.4s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ─── Durée vidéo ──────────────────────────────────── */
.gd-video-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(0, 0, 0, 0.78);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 5;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(4px);
  line-height: 1.3;
}

/* ── Context Menu ─────────────────────────────────────────── */
.gd-context-menu {
  position: fixed;
  z-index: 99999;
  min-width: 200px;
  background: color-mix(in srgb, var(--bg-card, #1a1a2e) 95%, #fff 5%);
  border: 1px solid color-mix(in srgb, #fff 12%, transparent);
  border-radius: 12px;
  padding: 6px;
  backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05);
  animation: gd-ctx-in 0.12s ease-out;
}
@keyframes gd-ctx-in {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.gd-ctx-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.gd-ctx-item:hover {
  background: color-mix(in srgb, var(--accent, #8b5cf6) 15%, transparent);
}
.gd-ctx-item svg {
  opacity: 0.7;
  flex-shrink: 0;
}
.gd-ctx-danger {
  color: #ef4444;
}
.gd-ctx-danger:hover {
  background: color-mix(in srgb, #ef4444 15%, transparent);
}
.gd-ctx-sep {
  height: 1px;
  margin: 4px 8px;
  background: color-mix(in srgb, #fff 8%, transparent);
}

/* ── Giri Upload Tracker ─────────────────────────── */
.gut-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 340px;
  max-height: 400px;
  background: color-mix(in srgb, var(--bg-card, #12121e) 97%, #fff 3%);
  border: 1px solid color-mix(in srgb, #fff 10%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
  backdrop-filter: blur(24px);
  z-index: 999999;
  overflow: hidden;
  font-family: inherit;
  animation: gut-slide-in 0.25s ease-out;
}
@keyframes gut-slide-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.gut-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, #fff 6%, transparent);
  user-select: none;
}
.gut-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gut-toggle {
  font-size: 0.9rem;
  color: var(--text-muted, #9ca3af);
}
.gut-body {
  max-height: 280px;
  overflow-y: auto;
  padding: 6px;
}
.gut-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background 0.1s;
}
.gut-item:hover {
  background: color-mix(in srgb, #fff 4%, transparent);
}
.gut-icon {
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 1px;
  display: flex;
  align-items: center;
}
.gut-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.gut-name {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gut-status {
  font-size: 0.7rem;
  color: var(--text-muted, #9ca3af);
}
.gut-detail {
  font-size: 0.68rem;
  color: var(--text-muted, #9ca3af);
}
.gut-progress-track {
  height: 6px;
  background: color-mix(in srgb, #fff 8%, transparent);
  border-radius: 99px;
  overflow: hidden;
}
.gut-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent, #8b5cf6), color-mix(in srgb, var(--accent, #8b5cf6) 60%, #06b6d4 40%));
  border-radius: 99px;
  transition: width 0.2s ease;
}
.gut-spinner, .gut-spinner-sm {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid color-mix(in srgb, var(--accent, #8b5cf6) 30%, transparent);
  border-top-color: var(--accent, #8b5cf6);
  border-radius: 50%;
  animation: gut-spin 0.7s linear infinite;
}
.gut-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
@keyframes gut-spin { to { transform: rotate(360deg); } }
.gut-done .gut-name { color: #22c55e; }
.gut-error .gut-name { color: #ef4444; }


/* ── Smart Thumbnails ─────────────────────────────────────── */
.gd-ext-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #fff;
  background: var(--badge-color, #8b5cf6);
  text-transform: uppercase;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--badge-color, #8b5cf6) 40%, transparent);
}
.gd-ext-badge-lg {
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 8px;
}
.gd-card-thumb-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.gd-thumb-emoji {
  font-size: 1.2rem;
  opacity: 0.4;
}

/* Audio waveform bars */
.gd-card-thumb-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, #8b5cf6 10%, transparent), color-mix(in srgb, #06b6d4 8%, transparent));
}
.gd-audio-bars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 32px;
}
.gd-audio-bars span {
  display: block;
  width: 4px;
  border-radius: 99px;
  background: linear-gradient(180deg, #8b5cf6, #06b6d4);
  animation: gd-bar-pulse 1.2s ease-in-out infinite;
}
.gd-audio-bars span:nth-child(1) { height: 40%; animation-delay: 0s; }
.gd-audio-bars span:nth-child(2) { height: 70%; animation-delay: 0.15s; }
.gd-audio-bars span:nth-child(3) { height: 100%; animation-delay: 0.3s; }
.gd-audio-bars span:nth-child(4) { height: 60%; animation-delay: 0.45s; }
.gd-audio-bars span:nth-child(5) { height: 30%; animation-delay: 0.6s; }
@keyframes gd-bar-pulse {
  0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
  50% { transform: scaleY(1); opacity: 1; }
}

/* PDF thumbnail */
.gd-card-thumb-pdf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, #ef4444 8%, transparent), color-mix(in srgb, #f97316 5%, transparent));
}