* ==================================================
 */


/* ── style-overrides.css ── */
/* Fix japonais : opacity canvas très basse */
#matrix-bg {
    opacity: 0.18 !important;
}

/* Fond main-content pour cacher les zones vides */
body.logged-in .main-content {
    background: #0d0d14 !important;
}

/* ===== TOOLBAR TÂCHES — BOUTONS GOLD COHÉRENTS ===== */
#view-tasks .ai-gen-filter-btn,
.user-filter-bar .ai-gen-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.07);
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: #c9a227;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.15s;
    flex-shrink: 0;
    position: relative;
}
#view-tasks .ai-gen-filter-btn:hover,
.user-filter-bar .ai-gen-filter-btn:hover {
    background: rgba(212, 175, 55, 0.16);
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.22);
    transform: translateY(-1px) scale(1.05);
}
#view-tasks .ai-gen-filter-btn.active,
.user-filter-bar .ai-gen-filter-btn.active {
    background: rgba(212, 175, 55, 0.20);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 0 16px rgba(212, 175, 55, 0.35), inset 0 0 8px rgba(212,175,55,0.08);
    color: #f0cc4a;
}
/* Tooltip au survol */
#view-tasks .ai-gen-filter-btn[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(10,12,18,0.95);
    color: #d4af37;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid rgba(212,175,55,0.25);
    pointer-events: none;
    z-index: 999;
}

/* ===== COLONNE TERMINÉ — amélioration visuelle ===== */
.task-column[data-status=done] {
    min-height: 200px;
}
.task-column[data-status=done] .task-list {
    max-height: calc(100vh - 320px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212,175,55,0.3) transparent;
}
/* Header colonne terminé avec dropdown période intégré proprement */
.task-column[data-status=done] .column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.done-period-dropdown {
    margin-left: auto;
    flex-shrink: 0;
}
.dpf-trigger {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: rgba(212,175,55,0.75);
    background: rgba(212,175,55,0.06);
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 7px;
    padding: 4px 9px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.dpf-trigger:hover { background: rgba(212,175,55,0.13); color: #d4af37; }
.dpf-menu {
    min-width: 130px;
    background: #0d1117;
    border: 1px solid rgba(212,175,55,0.2);
    border-radius: 9px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.dpf-opt { padding: 7px 12px; font-size: 12px; cursor: pointer; color: #a0aec0; }
.dpf-opt:hover, .dpf-opt.selected { color: #d4af37; background: rgba(212,175,55,0.08); }

/* ===== ACHIEVEMENTS VIEW — OVERLAY fixe, ne pousse pas le contenu ===== */
#achievements-view {
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9000;
    background: #080d12;
    overflow-y: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}
#achievements-view.hidden { display: none !important; }
#achievements-view .ta-root {
    padding: 60px 24px 24px;
    color: #e2e8f0;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}
/* Bouton retour — barre fixe en haut */
#achievements-back-btn {
    position: fixed;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(212,175,55,0.12);
    border: 1px solid rgba(212,175,55,0.30);
    color: #d4af37;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    z-index: 9001;
    transition: background 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
#achievements-back-btn:hover {
    background: rgba(212,175,55,0.22);
    box-shadow: 0 4px 20px rgba(212,175,55,0.2);
}

/* ===== TASK MEMORY — vue plein écran avec thème indépendant ===== */
#view-task-memory {
    background: #080d12 !important;
    color: #e2e8f0;
}
#view-task-memory .tm-container {
    background: #080d12 !important;
    min-height: 100%;
}
/* Forcer le fond sombre même avec thème rouge */
#view-task-memory .tm-header {
    background: linear-gradient(135deg, rgba(212,175,55,0.07) 0%, transparent 100%) !important;
}
#view-task-memory .tm-stat-value {
    color: #d4af37 !important;
}
#tm-modal .tm-container {
    background: #0d1117 !important;
}

/* ═══ Achievements Fusion — AI & History tabs v1.0 ═══ */

/* AI Stats row */
.ta-ai-stats {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 6px;
}
@media(max-width:768px){.ta-ai-stats{grid-template-columns:repeat(2,1fr)}}
.ta-ai-stat {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px; padding: 16px 12px; text-align: center;
}
.ta-ai-stat-val {
  font-size: 1.5rem; font-weight: 800; color: #f59e0b;
  font-variant-numeric: tabular-nums;
}
.ta-ai-stat-lbl { font-size: .72rem; color: rgba(255,255,255,.35); margin-top: 4px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }

/* AI Card */
.ta-ai-card {
  background: linear-gradient(135deg, rgba(212,175,55,.06), rgba(212,175,55,.02));
  border: 1px solid rgba(212,175,55,.15); border-radius: 14px; padding: 20px;
}
.ta-ai-narrative {
  font-size: .88rem; color: rgba(255,255,255,.6); line-height: 1.6;
  font-style: italic; margin-bottom: 14px;
}
.ta-ai-pills-label {
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 6px;
}
.ta-ai-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ta-ai-pill {
  padding: 5px 12px; border-radius: 20px; font-size: .75rem; font-weight: 600;
}
.ta-ai-pill.strength {
  background: rgba(74,222,128,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.2);
}
.ta-ai-pill.growth {
  background: rgba(96,165,250,.12); color: #60a5fa; border: 1px solid rgba(96,165,250,.2);
}
.ta-ai-meta { font-size: .7rem; color: rgba(255,255,255,.2); margin-top: 10px; }
.ta-ai-btns { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.ta-ai-gen-btn { font-size: .78rem !important; }

/* History filters */
.ta-hist-filters {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px;
}
.ta-hist-search {
  flex: 1; min-width: 140px; max-width: 260px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px; padding: 8px 12px; color: var(--text, #e2e8f0);
  font-size: .8rem; font-family: inherit; outline: none;
  transition: border-color .2s;
}
.ta-hist-search:focus { border-color: rgba(245,158,11,.4); }
.ta-hist-search::placeholder { color: rgba(255,255,255,.2); }

/* History list */
.ta-hist-list { display: flex; flex-direction: column; gap: 4px; }
.ta-hist-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.04);
  border-radius: 10px; transition: background .15s;
}
.ta-hist-item:hover { background: rgba(255,255,255,.04); }
.ta-hist-check {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  background: rgba(74,222,128,.12); color: #4ade80;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800; margin-top: 2px;
}
.ta-hist-body { flex: 1; min-width: 0; }
.ta-hist-title { font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.8); margin-bottom: 4px; }
.ta-hist-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ta-hist-badge {
  font-size: .68rem; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}
.ta-hist-badge.urgent { background: rgba(239,68,68,.15); color: #ef4444; }
.ta-hist-badge.high { background: rgba(245,158,11,.15); color: #f59e0b; }
.ta-hist-badge.medium { background: rgba(59,130,246,.15); color: #60a5fa; }
.ta-hist-badge.low { background: rgba(107,114,128,.15); color: #9ca3af; }
.ta-hist-badge.proj { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); }
.ta-hist-date { font-size: .7rem; color: rgba(255,255,255,.25); }
.ta-hist-summary { font-size: .74rem; color: rgba(255,255,255,.25); font-style: italic; margin-top: 4px; }
.ta-hist-right { flex-shrink: 0; }
.ta-hist-xp {
  font-size: .72rem; font-weight: 800; color: #f59e0b;
  background: rgba(245,158,11,.1); padding: 3px 8px; border-radius: 6px;
}

/* History pagination */
.ta-hist-pag {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05);
}
.ta-hist-pag-info { font-size: .78rem; color: rgba(255,255,255,.3); }

/* ═══ AI Analysis Premium Design v2.0 ═══ */

/* AI Hero — score + narrative side by side */
.ta-ai-hero {
  display: flex; gap: 20px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(212,175,55,.06), rgba(139,92,246,.04));
  border: 1px solid rgba(212,175,55,.12); border-radius: 16px;
  padding: 24px; margin-top: 12px;
}
@media(max-width:640px){ .ta-ai-hero { flex-direction: column; align-items: center; text-align: center; } }

.ta-ai-score {
  position: relative; flex-shrink: 0;
  width: 90px; height: 90px; display: flex; align-items: center; justify-content: center;
}
.ta-ai-score-num {
  position: absolute; font-size: 1.6rem; font-weight: 900; font-variant-numeric: tabular-nums;
}
.ta-ai-score-lbl {
  position: absolute; bottom: 6px; font-size: .6rem; color: rgba(255,255,255,.3);
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
}
.ta-ai-hero-text { flex: 1; min-width: 0; }
.ta-ai-category {
  display: inline-block; padding: 4px 14px; border-radius: 20px;
  background: linear-gradient(135deg, rgba(245,158,11,.15), rgba(139,92,246,.1));
  border: 1px solid rgba(245,158,11,.25);
  font-size: .75rem; font-weight: 700; color: #f59e0b;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 10px;
}
.ta-ai-narrative {
  font-size: .88rem; color: rgba(255,255,255,.7); line-height: 1.7; margin-bottom: 10px;
}
.ta-ai-meta { font-size: .7rem; color: rgba(255,255,255,.2); }

/* AI Blocks — strengths, growth, milestones */
.ta-ai-block { margin-top: 16px; }
.ta-ai-block-title {
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.5);
  margin-bottom: 8px; letter-spacing: .3px;
}
.ta-ai-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px;
  border-radius: 10px; margin-bottom: 4px; transition: background .15s;
}
.ta-ai-item:hover { background: rgba(255,255,255,.03); }
.ta-ai-item-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.ta-ai-item-title { font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.75); }
.ta-ai-item-desc { font-size: .76rem; color: rgba(255,255,255,.35); margin-top: 2px; line-height: 1.4; }

/* AI Stats with icon */
.ta-ai-stat { position: relative; }
.ta-ai-stat-icon {
  font-size: 1.1rem; margin-bottom: 4px;
}

/* Generate buttons row */
.ta-ai-gen-row { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }

/* Previous analyses */
.ta-ai-prev {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05);
  border-radius: 12px; padding: 14px 16px; margin-top: 8px;
}
.ta-ai-prev-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;
}
.ta-ai-prev-period { font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.5); }
.ta-ai-prev-score { font-size: .78rem; font-weight: 800; }
.ta-ai-prev-count { font-size: .68rem; color: rgba(255,255,255,.2); margin-left: auto; }
.ta-ai-prev-cat { font-size: .7rem; font-weight: 600; color: #f59e0b; margin-bottom: 6px; }
.ta-ai-prev-narr { font-size: .8rem; color: rgba(255,255,255,.4); line-height: 1.5; }

/* ═══ Fix colonne Terminé tronquée ═══ */
#view-tasks .task-column { overflow: visible; }
#view-tasks .column-header { overflow: visible; }
#view-tasks .column-count { white-space: nowrap; flex-shrink: 0; min-width: 28px; text-align: center; }

/* ═══ FIXES v3 — hover zoom, couronne, badge 86, tooltip calendrier ═══ */

/* 1. Hover zoom subtil — pas de drop-shadow GPU-intensive */
.bubble:hover,
.task-bubble:hover {
  transform: translateY(-3px) scale(1.01) !important;
  filter: brightness(1.08) !important;
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease !important;
}
[data-theme]:not([data-theme="academie"]) .bubble:hover,
[data-theme]:not([data-theme="academie"]) .task-bubble:hover {
  transform: translateY(-3px) scale(1.01) !important;
  filter: brightness(1.08) !important;
}
.bubble.done:hover,
.task-bubble.done:hover {
  transform: translateY(-2px) scale(1.005) !important;
  filter: brightness(1.05) !important;
}
[data-theme]:not([data-theme="academie"]) .bubble.done:hover,
[data-theme]:not([data-theme="academie"]) .task-bubble.done:hover {
  transform: translateY(-2px) scale(1.005) !important;
  filter: brightness(1.05) !important;
}

/* 2. Couronne + stylo — stylo caché par défaut, visible au hover */
}

/* 3. Badge colonne Terminé — jamais tronqué */
#view-tasks .task-column {
  overflow: visible !important;
}
#view-tasks .column-header {
  overflow: visible !important;
  gap: 8px !important;
}
#view-tasks .column-header h2 {
  min-width: 0 !important;
  white-space: nowrap !important;
}
.column-count {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 28px !important;
  text-align: center !important;
}

/* 4. Tooltip calendrier accomplissements — ne couvre pas le titre */
.ta-cal-cell {
  position: relative !important;
}
.ta-cal-cell[title] {
  cursor: default;
}
/* Override browser tooltip with CSS-only tooltip below the cell */
.ta-root .ta-cal-grid {
  position: relative;
}

/* 5. Custom tooltip for data-tip (replaces native title) */
[data-tip] {
  position: relative;
}
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,20,25,.95);
  color: rgba(255,255,255,.8);
  font-size: .7rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
/* Calendar cells: tooltip BELOW to not cover header */
.ta-cal-cell[data-tip]:hover::after {
  bottom: auto;
  top: calc(100% + 4px);
}

/* 2. Couronne (task-user) — positionnement naturel, pas de margin hack */
.bubble .bubble-header .task-user {
  position: relative !important;
  z-index: 1 !important;
  margin-right: 0 !important;
}

/* Stylo (edit-btn) — invisible par défaut, apparait au hover */
.bubble .edit-btn {
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
  z-index: 3 !important;
}
.bubble:hover .edit-btn {
  opacity: 1 !important;
}
/* Si la tache a des notes, montrer le stylo en subtil */
.bubble .edit-btn.has-note {
  opacity: 0.35 !important;
}
.bubble:hover .edit-btn.has-note {
  opacity: 1 !important;
}

/* ═══ Fix colonnes tâches — affichage parfait (19 mars 2026) ═══ */
#view-tasks {
  overflow-x: hidden !important;
}
#view-tasks .app-container {
  max-width: calc(100vw - var(--sb-width-open, 260px) - 8px) !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}
body.sidebar-collapsed #view-tasks .app-container {
  max-width: calc(100vw - var(--sb-width-closed, 64px) - 8px) !important;
}
.columns-view,
#columns-view {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--space-lg, 16px) !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 4px !important;
}
.columns-view .task-column,
#columns-view .task-column {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
}
/* Header de colonne — jamais coupé */
.columns-view .task-column .column-header,
#columns-view .task-column .column-header {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.columns-view .task-column .column-header h2,
#columns-view .task-column .column-header h2 {
  min-width: 0 !important;
  flex-shrink: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.columns-view .task-column .column-header .column-count,
#columns-view .task-column .column-header .column-count {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  min-width: 28px !important;
}
/* Task list — scroll vertical, pas de débordement horizontal */
.columns-view .task-column .task-list,
#columns-view .task-column .task-list {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}
/* Bulles — contenu adaptatif, pas coupé */
.columns-view .task-column .bubble,
#columns-view .task-column .bubble {
  overflow: visible !important;
  word-break: break-word !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Header de bulle — tags et meta wrap proprement */
.columns-view .task-column .bubble .bubble-header,
#columns-view .task-column .bubble .bubble-header {
  overflow: visible !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}
/* Tags et meta — shrink gracefully */
.columns-view .task-column .bubble .task-tags,
.columns-view .task-column .bubble .task-meta,
#columns-view .task-column .bubble .task-tags,
#columns-view .task-column .bubble .task-meta {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex-wrap: wrap !important;
}
/* Projet badge — tronque si trop long */
.columns-view .task-column .bubble .task-project,
#columns-view .task-column .bubble .task-project {
  max-width: 140px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex-shrink: 1 !important;
}
/* Priorité badge */
.columns-view .task-column .bubble .task-priority,
#columns-view .task-column .bubble .task-priority {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}
/* User avatar (couronne) */
.columns-view .task-column .bubble .task-user,
#columns-view .task-column .bubble .task-user {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
/* Edit button (stylo) — pas coupé */
.columns-view .task-column .bubble .edit-btn,
#columns-view .task-column .bubble .edit-btn {
  flex-shrink: 0 !important;
  position: absolute !important;
  right: 8px !important;
  top: 8px !important;
}

/* Sidebar header: remove yellow/gold tinted border above profile */
.sidebar-header {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

/* === Tunnel Club — wood textures v2 (sharp 1740x940) — bump  === */
[data-theme='wood-legendary'] {
  --wood-medium: url('textures/wood-medium.jpg?v=') !important;
  --wood-body:   url('textures/wood-body.jpg?v=')   !important;
}


/* ── giri-calendar.css ── */
/**
 * Giri Calendar v1.0 — Design Premium Dark
 * Module calendrier interactif
 */

/* ══════════════════════════════════════════════════
   ROOT / VARIABLES
══════════════════════════════════════════════════ */
:root {
  --gcal-bg:          #0f1117;
  --gcal-surface:     rgba(255,255,255,0.03);
  --gcal-surface-2:   rgba(255,255,255,0.06);
  --gcal-border:      rgba(255,255,255,0.08);
  --gcal-border-h:    rgba(255,255,255,0.15);
  --gcal-text:        #e2e8f0;
  --gcal-text-2:      #94a3b8;
  --gcal-text-3:      #64748b;
  --gcal-accent:      var(--accent-color, var(--accent));
  --gcal-accent-rgb:  var(--accent-rgb, 99,102,241);
  --gcal-today-bg:    rgba(99,102,241,0.10);
  --gcal-today-ring:  rgba(99,102,241,0.5);
  --gcal-weekend:     rgba(255,255,255,0.01);
  --gcal-other:       rgba(255,255,255,0.02);
  --gcal-hour-h:      52px;
  --gcal-shadow:      0 4px 24px rgba(0,0,0,0.4);
  --gcal-shadow-xl:   0 20px 60px rgba(0,0,0,0.6);
  --gcal-radius:      14px;
  --gcal-radius-sm:   8px;
}

/* ══════════════════════════════════════════════════
   CONTAINER
══════════════════════════════════════════════════ */
.gcal-root {
  height: 100%;
  overflow: hidden;
  /* NE PAS mettre display:flex ici — override .view-container { display:none }
     La règle flex est appliquée UNIQUEMENT quand la vue est active */
}

/* Flex layout only when calendar view is active */
.view-container.active.gcal-root {
  display: flex;
  flex-direction: column;
}

.gcal-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0;
  background: var(--bg-primary, #0f1117);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   HEADER
══════════════════════════════════════════════════ */
.gcal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  background: rgba(255,255,255,0.025);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--gcal-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.gcal-header-left, .gcal-header-center, .gcal-header-right, .gcal-header-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcal-header-right { gap: 8px; }

.gcal-header-nav { gap: 16px; }

.gcal-month-label {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gcal-text, #e2e8f0);
  min-width: 180px;
  text-align: center;
}

.gcal-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gcal-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(var(--gcal-accent-rgb),.3), rgba(var(--gcal-accent-rgb),.1));
  border: 1px solid rgba(var(--gcal-accent-rgb),.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gcal-accent);
  flex-shrink: 0;
}

.gcal-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gcal-text);
  line-height: 1.2;
}

.gcal-period {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--gcal-text-2);
  font-weight: 500;
}

/* Nav buttons */
.gcal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--gcal-surface);
  border: 1px solid var(--gcal-border);
  border-radius: 10px;
  padding: 4px;
}

.gcal-nav-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--gcal-text);
  border-radius: 7px;
  cursor: pointer;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.gcal-nav-btn:hover { background: var(--gcal-surface-2); }

.gcal-nav-today {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--gcal-text-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-nav-today:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }

/* View buttons */
.gcal-views {
  display: flex;
  background: var(--gcal-surface);
  border: 1px solid var(--gcal-border);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}

.gcal-view-btn {
  padding: 5px 14px;
  border: none;
  background: transparent;
  color: var(--gcal-text-2);
  border-radius: 7px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 600;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
  white-space: nowrap;
}
.gcal-view-btn:hover { color: var(--gcal-text); background: var(--gcal-surface-2); }
.gcal-view-btn.active {
  background: var(--gcal-accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.4);
}

/* Action buttons */
.gcal-btn-create {
  padding: 8px 16px;
  border: none;
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(var(--gcal-accent-rgb),.4);
}
.gcal-btn-create:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(var(--gcal-accent-rgb),.5);
}

.gcal-btn-sync {
  width: 36px;
  height: 36px;
  border: 1px solid var(--gcal-border);
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-surface);
  color: var(--gcal-text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.gcal-btn-sync:hover { color: var(--gcal-text); border-color: var(--gcal-border-h); }
.gcal-btn-sync.spin svg { animation: gcal-spin .8s linear infinite; }

@keyframes gcal-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════
   BODY
══════════════════════════════════════════════════ */
.gcal-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary, #0f1117);
  border-radius: var(--gcal-radius-sm);
}

/* ══════════════════════════════════════════════════
   MONTH VIEW
══════════════════════════════════════════════════ */
.gcal-month {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary, #0f1117);
}

.gcal-month-head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--gcal-border);
  flex-shrink: 0;
}

.gcal-day-name {
  padding: 10px 8px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gcal-text-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(255,255,255,0.015);
}

.gcal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  flex: 1;
  overflow: hidden;
  border-left: 1px solid var(--gcal-border);
}

.gcal-mcell {
  border-right: 1px solid var(--gcal-border);
  border-bottom: 1px solid var(--gcal-border);
  padding: 6px;
  padding-bottom: 22px;
  min-height: 90px;
  overflow: hidden;
  cursor: default;
  transition: background .15s;
  position: relative;
}
.gcal-mcell:hover { background: var(--gcal-surface); }
.gcal-mcell.other  { background: var(--gcal-other); }
.gcal-mcell.weekend { background: var(--gcal-weekend); }
.gcal-mcell.today  { background: var(--gcal-today-bg); box-shadow: inset 0 0 0 2px var(--gcal-today-ring); }
.gcal-mcell.drop-over { background: rgba(var(--gcal-accent-rgb),.12); }

.gcal-mday-num {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gcal-text-2);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  margin-bottom: 4px;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-mday-num:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }
.gcal-mday-num.today {
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.5);
}
.gcal-mcell.other .gcal-mday-num { color: var(--gcal-text-3); }

.gcal-mday-evs {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Event chips (month) */
.gcal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--ec) 15%, transparent);
  color: var(--ec);
  border-left: 2px solid var(--ec);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  transition: transform .12s ease-out, background .12s ease-out, border-color .12s ease-out, color .12s ease-out, opacity .12s ease-out;
  user-select: none;
}
.gcal-chip:hover {
  background: color-mix(in srgb, var(--ec) 25%, transparent);
  transform: translateX(1px);
}

.gcal-chip-time { opacity: .7; font-weight: 500; flex-shrink: 0; }
.gcal-chip-title { overflow: hidden; text-overflow: ellipsis; }
.gcal-chip-bell  { font-size: .6rem; flex-shrink: 0; }

.gcal-more {
  font-size: 0.68rem;
  color: var(--gcal-accent);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all .15s;
  position: absolute;
  bottom: 3px;
  left: 4px;
  right: 4px;
  text-align: center;
  background: rgba(var(--gcal-accent-rgb), 0.1);
  font-weight: 600;
  z-index: 2;
}
.gcal-more:hover { color: #fff; background: rgba(var(--gcal-accent-rgb), 0.25); }

/* ══════════════════════════════════════════════════
   WEEK / DAY SHARED
══════════════════════════════════════════════════ */
.gcal-week, .gcal-day-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.gcal-week-head, .gcal-allday-row {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--gcal-border);
}

.gcal-tgutter {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--gcal-border);
}
.gcal-tgutter-sm {
  font-size: 0.62rem;
  color: var(--gcal-text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  text-align: center;
  line-height: 1.2;
}

.gcal-wcol-head {
  flex: 1;
  padding: 8px 4px;
  text-align: center;
  border-right: 1px solid var(--gcal-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.gcal-wcol-head.today { background: var(--gcal-today-bg); }

.gcal-wday-s {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gcal-text-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.gcal-wday-n {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gcal-text-2);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-wday-n.today {
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(var(--gcal-accent-rgb),.5);
}

/* All-day row */
.gcal-allday-row {
  min-height: 28px;
  background: rgba(255,255,255,0.015);
}

.gcal-allday-col {
  flex: 1;
  border-right: 1px solid var(--gcal-border);
  padding: 3px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gcal-allday-pill {
  background: color-mix(in srgb, var(--ec) 20%, transparent);
  color: var(--ec);
  border-left: 3px solid var(--ec);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: transform .12s ease-out, background .12s ease-out, border-color .12s ease-out, color .12s ease-out, opacity .12s ease-out;
}
.gcal-allday-pill:hover { background: color-mix(in srgb, var(--ec) 30%, transparent); }

/* All-day bar (day view) */
.gcal-allday-bar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--gcal-border);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}

/* Time grid body */
.gcal-week-body, .gcal-day-grid {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  scrollbar-width: thin;
  scrollbar-color: var(--gcal-border) transparent;
}

.gcal-time-col {
  width: 52px;
  flex-shrink: 0;
  border-right: 1px solid var(--gcal-border);
}

.gcal-hlabel {
  height: var(--gcal-hour-h);
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2px 6px 0 0;
  font-size: 0.65rem;
  color: var(--gcal-text-3);
  font-weight: 500;
}

/* Week columns */
.gcal-wcol {
  flex: 1;
  position: relative;
  border-right: 1px solid var(--gcal-border);
  min-width: 0;
}
.gcal-wcol.today { background: var(--gcal-today-bg); }

/* Day column */
.gcal-dcol {
  flex: 1;
  position: relative;
  min-width: 0;
}
.gcal-dcol.today { background: var(--gcal-today-bg); }

.gcal-hslot {
  height: var(--gcal-hour-h);
  border-bottom: 1px solid var(--gcal-border);
  cursor: pointer;
  transition: background .1s;
}
.gcal-hslot:hover { background: rgba(var(--gcal-accent-rgb),.05); }

/* Time events */
.gcal-wev, .gcal-dev {
  position: absolute;
  left: 3px;
  right: 3px;
  background: color-mix(in srgb, var(--ec) 20%, rgba(15,17,23,.8));
  border-left: 3px solid var(--ec);
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  overflow: hidden;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  user-select: none;
  z-index: 1;
}
.gcal-wev:hover, .gcal-dev:hover {
  background: color-mix(in srgb, var(--ec) 30%, rgba(15,17,23,.85));
  transform: translateX(2px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  z-index: 2;
}

.gcal-wev-title, .gcal-dev-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ec);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcal-wev-time, .gcal-dev-time {
  font-size: 0.65rem;
  color: color-mix(in srgb, var(--ec) 70%, white);
  opacity: .8;
}
.gcal-dev-loc { font-size: 0.65rem; color: var(--gcal-text-3); margin-top: 2px; }

/* Current time line */
.gcal-nowline {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 6px rgba(239,68,68,.6);
}
.gcal-nowdot {
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 6px rgba(239,68,68,.8);
}

/* ══════════════════════════════════════════════════
   MODALS / OVERLAYS
══════════════════════════════════════════════════ */
.gcal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gcal-popup {
  background: #1a1d27;
  border: 1px solid var(--gcal-border-h);
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--gcal-shadow-xl);
  animation: gcal-popup-in .2s cubic-bezier(.34,1.56,.64,1);
  scrollbar-width: thin;
  scrollbar-color: var(--gcal-border) transparent;
}
@keyframes gcal-popup-in {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.gcal-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--gcal-border);
}
.gcal-pop-head h3 { margin: 0; font-size: 1.1rem; color: var(--gcal-text); font-weight: 700; }

.gcal-pop-close {
  width: 32px; height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--gcal-surface-2);
  color: var(--gcal-text-2);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-pop-close:hover { background: var(--gcal-surface); color: var(--gcal-text); }

/* Day popup */
.gcal-day-pop .gcal-pop-head { border: none; }
.gcal-pop-evs { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.gcal-pop-ev {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px;
  background: var(--gcal-surface);
  cursor: pointer; font-size: 0.85rem;
  color: var(--gcal-text); transition: background .15s;
}
.gcal-pop-ev:hover { background: var(--gcal-surface-2); }
.gcal-pop-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   EVENT FORM
══════════════════════════════════════════════════ */
.gcal-form-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

.gcal-fg { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.gcal-frow { display: flex; gap: 12px; }
.gcal-flabel { font-size: 0.72rem; font-weight: 700; color: var(--gcal-text-2); text-transform: uppercase; letter-spacing: .06em; }

.gcal-input {
  padding: 10px 14px;
  border-radius: var(--gcal-radius-sm);
  border: 1px solid var(--gcal-border);
  background: rgba(255,255,255,0.04);
  color: var(--gcal-text);
  font-size: 0.9rem;
  transition: border-color .15s, background .15s;
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
}
.gcal-input:focus {
  outline: none;
  border-color: rgba(var(--gcal-accent-rgb),.6);
  background: rgba(var(--gcal-accent-rgb),.05);
}

.gcal-title-inp {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 12px 14px;
}
.gcal-textarea {
  min-height: 80px;
  resize: vertical;
}
.gcal-color-inp {
  width: 100%;
  height: 42px;
  padding: 4px;
  cursor: pointer;
}
.gcal-fg-color { max-width: 100px; }

/* Toggle */
.gcal-allday-fg { justify-content: flex-end; align-items: flex-end; }
.gcal-toggle { position: relative; display: inline-block; cursor: pointer; }
.gcal-toggle input { display: none; }
.gcal-toggle-track {
  width: 44px; height: 24px;
  background: var(--gcal-surface-2);
  border: 1px solid var(--gcal-border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  padding: 2px;
  transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.gcal-toggle input:checked + .gcal-toggle-track {
  background: rgba(var(--gcal-accent-rgb),.3);
  border-color: rgba(var(--gcal-accent-rgb),.5);
}
.gcal-toggle-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gcal-text-3);
  transition: transform .2s ease-out, background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.gcal-toggle input:checked + .gcal-toggle-track .gcal-toggle-thumb {
  transform: translateX(20px);
  background: var(--gcal-accent);
}

/* Form footer */
.gcal-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--gcal-border);
  gap: 12px;
}
.gcal-foot-right { display: flex; gap: 8px; margin-left: auto; }

.gcal-btn-prim {
  padding: 9px 20px;
  border: none;
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
  box-shadow: 0 2px 12px rgba(var(--gcal-accent-rgb),.4);
}
.gcal-btn-prim:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(var(--gcal-accent-rgb),.5); }

.gcal-btn-sec {
  padding: 9px 20px;
  border: 1px solid var(--gcal-border);
  border-radius: var(--gcal-radius-sm);
  background: var(--gcal-surface);
  color: var(--gcal-text-2);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-btn-sec:hover { background: var(--gcal-surface-2); color: var(--gcal-text); }

.gcal-btn-danger {
  padding: 9px 16px;
  border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--gcal-radius-sm);
  background: rgba(239,68,68,.1);
  color: #ef4444;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  transition: transform .15s ease-out, background .15s ease-out, border-color .15s ease-out, color .15s ease-out, opacity .15s ease-out;
}
.gcal-btn-danger:hover { background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.5); }

/* ══════════════════════════════════════════════════
   EVENT DETAIL
══════════════════════════════════════════════════ */
.gcal-detail { position: relative; overflow: hidden; }
.gcal-detail-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--ec);
}

.gcal-type-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.gcal-detail-body { padding: 16px 20px 8px; }
.gcal-detail-title {
  margin: 0 0 16px;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gcal-text);
  line-height: 1.3;
}
.gcal-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.gcal-detail-row {
  font-size: 0.875rem;
  color: var(--gcal-text-2);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gcal-detail-desc {
  margin: 16px 0 0;
  font-size: 0.875rem;
  color: var(--gcal-text-2);
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .gcal-header { padding: 12px 16px; gap: 8px; }
  .gcal-logo-icon { display: none; }
  .gcal-title { font-size: 1rem; }
  .gcal-views { display: none; }
  .gcal-btn-create { padding: 7px 12px; font-size: 0.8rem; }
  .gcal-frow { flex-direction: column; }
  .gcal-popup { border-radius: 14px; }
  .gcal-month-grid { grid-template-rows: repeat(6, minmax(70px, 1fr)); }
  .gcal-chip-time { display: none; }
  .gcal-header-left { min-width: 0; }
}

@media (max-width: 480px) {
  .gcal-mday-num { width: 22px; height: 22px; font-size: 0.75rem; }
  .gcal-chip { font-size: 0.65rem; padding: 1px 4px; }
  .gcal-header { flex-wrap: wrap; }
  .gcal-header-center, .gcal-header-right { flex-wrap: wrap; }
  .gcal-fg-color { max-width: none; }
}

/* ===== CURRENT TIME LINE ===== */
.gcal-now-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #ef4444 5%, #ef4444 100%);
  z-index: 10;
  pointer-events: none;
  animation: gcalNowPulse 2s ease-in-out infinite;
}
.gcal-now-dot {
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px rgba(239,68,68,0.8);
}
@keyframes gcalNowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* ===== CALENDAR CSS SCOPING — prevent bleed ===== */
/* All gcal- classes are already scoped, :root vars use --gcal- prefix */
/* Extra safety: scope inside .gcal-root */
.gcal-root { contain: layout style; }
/* ── Task dots in month cells (addon) ── */
#view-calendar .gcal-task-dots {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 2px 2px 0;
}
#view-calendar .gcal-task-dot {
  width: 6px; height: 6px; border-radius: 50%;
  opacity: 0.7; transition: opacity 0.2s;
}
#view-calendar .gcal-task-dot.done {
  opacity: 0.3;
  background: #22c55e !important;
}
#view-calendar .gcal-task-dot-more {
  font-size: 0.55rem; color: var(--gcal-text-2);
  line-height: 6px;
}
/* Week col task indicator */
#view-calendar .gcal-wcol-tasks {
  display: block; font-size: 0.62rem;
  color: var(--gcal-accent); opacity: 0.8;
  margin-top: 2px;
}



/* ══════════════════════════════════════════════════
   FIX SCROLL MONTH VIEW v3 — 2026-03-31
   The entire chain gcal-root > gcal-wrap > gcal-body > gcal-month
   had overflow:hidden + height:100%, making scroll impossible.
   Fix: main-content is the real scroll container (overflow-y:auto).
   We switch gcal-root from height:100%+overflow:hidden to
   min-height:100% so it can grow taller than the viewport,
   letting main-content scroll naturally.
══════════════════════════════════════════════════ */

/* ── Scroll fix: MONTH VIEW ONLY ──
   Week/day views need height:100% + overflow:hidden on parents
   for their internal scroll to work. Only override for month. */

/* When month view is showing, let the body scroll naturally */
.gcal-body:has(.gcal-month) {
  overflow: visible !important;
  height: auto !important;
  min-height: 0;
}

/* Fallback for browsers without :has — JS adds this class */
.gcal-body.gcal-month-active {
  overflow: visible !important;
  height: auto !important;
  min-height: 0;
}

/* When month is active, parents must also flow */
.gcal-root:has(.gcal-month),
.gcal-wrap:has(.gcal-month) {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}
.gcal-root.gcal-month-active,
.gcal-wrap.gcal-month-active,
.view-container.active.gcal-root.gcal-month-active {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}

/* Month grid itself */
.gcal-month {
  overflow: visible;
  height: auto;
  min-height: 100%;
}

.gcal-month-grid {
  overflow: visible;
  grid-template-rows: repeat(6, minmax(110px, auto));
}

/* Soft blur fade under the grid bottom */
.gcal-month {
  position: relative;
}
.gcal-month::after {
  content: '';
  display: block;
  height: 48px;
  background: linear-gradient(to bottom,
    rgba(var(--gcal-accent-rgb, 99,102,241), 0.04),
    transparent 100%);
  filter: blur(6px);
  pointer-events: none;
  margin-top: -8px;
}

/* ── Selected day cell ── */
.gcal-mcell.selected {
  box-shadow: inset 0 0 0 3px var(--gcal-accent),
              0 0 20px rgba(var(--gcal-accent-rgb, 99,102,241), 0.4),
              0 0 40px rgba(var(--gcal-accent-rgb, 99,102,241), 0.15);
  background: rgba(var(--gcal-accent-rgb, 99,102,241), 0.12);
  border-radius: 6px;
  transition: box-shadow 0.25s ease, background 0.25s ease;
  z-index: 2;
  position: relative;
}
.gcal-mcell.selected .gcal-mday-num {
  background: var(--gcal-accent);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 10px rgba(var(--gcal-accent-rgb, 99,102,241), 0.6);
}

/* ── Side panel: inline flex mode (2026-03-31 v2) ── */
/* Styles moved to overrides.bundle.css */

/* ══════════════════════════════════════════════════
   SIDE PANEL — Base styles + responsive fix (2026-03-31)
   Le side panel avait uniquement position:fixed dans
   overrides, sans width/padding de base => cropé.
══════════════════════════════════════════════════ */
#view-calendar .gcal-sidepanel {
  position: fixed !important;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 90vw;
  height: 100vh;
  z-index: 100;
  background: var(--bg-secondary, #12151e);
  border-left: 1px solid rgba(255,255,255,0.08);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

#view-calendar .gcal-sidepanel.open {
  transform: translateX(0);
  box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}

#view-calendar .gcal-sp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
  gap: 8px;
}

#view-calendar .gcal-sp-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #e2e8f0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#view-calendar .gcal-sp-close {
  width: 28px;
  height: 28px;
  min-width: 28px;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 6px;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

#view-calendar .gcal-sp-close:hover {
  background: rgba(255,255,255,0.1);
  color: var(--text-primary, #e2e8f0);
}

#view-calendar .gcal-sp-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.1) transparent;
}

#view-calendar .gcal-sp-section {
  margin-bottom: 20px;
}

#view-calendar .gcal-sp-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, #64748b);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

#view-calendar .gcal-sp-add {
  background: rgba(var(--accent-rgb,99,102,241),0.15);
  color: var(--accent-color, var(--accent));
  border: 1px solid rgba(var(--accent-rgb,99,102,241),0.3);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

#view-calendar .gcal-sp-add:hover {
  background: rgba(var(--accent-rgb,99,102,241),0.25);
}

#view-calendar .gcal-sp-empty {
  font-size: 0.82rem;
  color: var(--text-secondary, #64748b);
  font-style: italic;
  padding: 8px 0;
}

#view-calendar .gcal-sp-ev {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}

#view-calendar .gcal-sp-ev:hover {
  background: rgba(255,255,255,0.04);
}

#view-calendar .gcal-sp-dot {
  width: 8px;
  height: 8px;
  min-width: 8px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

#view-calendar .gcal-sp-ev-info {
  flex: 1;
  min-width: 0;
}

#view-calendar .gcal-sp-ev-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#view-calendar .gcal-sp-ev-time {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  margin-top: 2px;
}

#view-calendar .gcal-sp-task {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-primary, #e2e8f0);
}

#view-calendar .gcal-sp-task-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  color: transparent;
}

#view-calendar .gcal-sp-task-check.done {
  background: rgba(34,197,94,0.2);
  border-color: #22c55e;
  color: #22c55e;
}

#view-calendar .gcal-sp-task-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Side panel task priorities */
#view-calendar .gcal-sp-task-urgent,
#view-calendar .gcal-sp-task-high {
  border-left: 3px solid #ef4444;
}

#view-calendar .gcal-sp-task-medium {
  border-left: 3px solid #f59e0b;
}

#view-calendar .gcal-sp-task-low {
  border-left: 3px solid #10b981;
}

@media (max-width: 768px) {
  #view-calendar .gcal-sidepanel {
    width: 100vw;
    max-width: 100vw;
  }
}


/* ── giri-drive.css ── */
/* =====================================================
   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: 0.75rem;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 0.5rem 0.75rem;
}

/* 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;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 0.35rem 0.75rem;
}

.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: visible;
  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 {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  padding: 0.45rem 0.3rem;
  background: rgba(8, 6, 18, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255,255,255,0.08);
  border-radius: 0 0 14px 14px;
  z-index: 5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.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));
}

/* ═══════════════════════════════════════════════════════
   THÈME BOIS LÉGENDAIRE — overrides GIRI DRIVE
   Chargé après theme-wood-legendary.css → priorité garantie
   ═══════════════════════════════════════════════════════ */

/* Supprimer TOUT blur derrière les cartes fichiers */
[data-theme='wood-legendary'] .gd-file-card,
[data-theme='wood-legendary'] .gd-file-card * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Zone fichiers = fond transparent = seul le wood-dark du main-content visible */
[data-theme='wood-legendary'] .gd-tab-panel,
[data-theme='wood-legendary'] .gd-files-grid,
[data-theme='wood-legendary'] .gd-container {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Stats bar = bois très clair (surcharge) */
[data-theme='wood-legendary'] .gd-stats-bar {
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-color: rgba(255,248,230,0.92) !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
}

/* ─── QUOTA BAR — Bois Clair (wood-legendary override) ── */
[data-theme='wood-legendary'] #view-giri-drive .gd-quota-wrap {
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-color: rgba(255,248,230,0.92) !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(212,164,76,0.30) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,235,160,0.40) !important;
  padding: 0.7rem 1.1rem !important;
  margin-bottom: 0.75rem !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-quota-bar {
  background: rgba(42,18,0,0.20) !important;
  height: 7px !important;
  border-radius: 99px !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.15) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-quota-fill {
  background: linear-gradient(90deg, #8B4A00, #D4A44C, #F0C060) !important;
  box-shadow: 0 0 8px rgba(212,164,76,0.45) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-quota-label {
  color: #3A1800 !important;
  font-weight: 600 !important;
  font-size: 0.76rem !important;
  text-shadow: 0 1px 0 rgba(255,235,180,0.50) !important;
}

/* ─── TOOLBAR — Bois Clair (wood-legendary override) ──── */
[data-theme='wood-legendary'] #view-giri-drive .gd-toolbar {
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-color: rgba(255,248,230,0.92) !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(212,164,76,0.28) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,235,160,0.38) !important;
}
/* Input de recherche sur fond bois clair */
[data-theme='wood-legendary'] #view-giri-drive .gd-search-input {
  background: rgba(255,245,220,0.70) !important;
  border: 1px solid rgba(139,74,0,0.30) !important;
  color: #2A1200 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.10) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-search-input::placeholder {
  color: rgba(58,24,0,0.45) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-search-input:focus {
  border-color: rgba(139,74,0,0.55) !important;
  background: rgba(255,248,225,0.85) !important;
  box-shadow: 0 0 0 3px rgba(212,164,76,0.20), inset 0 1px 3px rgba(0,0,0,0.08) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-search-icon {
  color: rgba(58,24,0,0.55) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-search-clear {
  background: rgba(139,74,0,0.15) !important;
  color: rgba(58,24,0,0.60) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-search-clear:hover {
  background: rgba(139,74,0,0.28) !important;
  color: #2A1200 !important;
}
/* Sort select sur fond bois clair */
[data-theme=wood-legendary] #view-giri-drive .gd-sort-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-sort-select {
  color: #3A1800 !important;
  background: transparent !important;
  border: none !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-sort-select option {
  background: #F5E8CC !important;
  color: #2A1200 !important;
}
/* View toggle (grille/liste) sur fond bois clair */
[data-theme='wood-legendary'] #view-giri-drive .gd-view-toggle {
  background: rgba(255,245,220,0.70) !important;
  border: 1px solid rgba(139,74,0,0.28) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-view-btn {
  color: rgba(58,24,0,0.50) !important;
  background: transparent !important;
  border: none !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-view-btn:hover {
  color: #2A1200 !important;
  background: rgba(212,164,76,0.18) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-view-btn.active {
  background: rgba(139,74,0,0.22) !important;
  color: #2A1200 !important;
}

/* ─── CARTES — Shadow omnidirectionnelle bois clair ──── */
[data-theme='wood-legendary'] #view-giri-drive .gd-file-card {
  box-shadow:
    0 0 0 1px rgba(212,164,76,0.18),
    0 0 8px  rgba(90,45,10,0.22),
    0 0 20px rgba(0,0,0,0.13) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gd-file-card:hover {
  box-shadow:
    0 0 0 1px rgba(212,164,76,0.40),
    0 0 12px rgba(90,45,10,0.30),
    0 0 28px rgba(0,0,0,0.18),
    0 0 6px  rgba(212,164,76,0.15) !important;
  transform: translateY(-2px) scale(1.012) !important;
}

/* ─── TABS — Bois moyen clair + angles arrondis ────────── */
[data-theme='wood-legendary'] #view-giri-drive .gd-tabs {
  background-color: rgba(185,130,55,1.0) !important;
  background-image: url('textures/wood-medium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(212,164,76,0.32) !important;
  border-bottom: 1px solid rgba(212,164,76,0.32) !important;
  border-radius: 14px !important;
  margin-bottom: 0.75rem !important;
  padding: 0.3rem 0.4rem !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,220,120,0.28) !important;
  gap: 0.2rem !important;
}
[data-theme=wood-legendary] #view-giri-drive .gd-tabs .gd-tab {
  color: #2A1200 !important;
  border-radius: 10px !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: 0 !important;
  transition: color 0.15s, background 0.15s !important;
}
[data-theme=wood-legendary] #view-giri-drive .gd-tabs .gd-tab:hover {
  color: #2A1200 !important;
  background: rgba(255,235,150,0.28) !important;
}
[data-theme=wood-legendary] #view-giri-drive .gd-tabs .gd-tab.active {
  color: #1A0800 !important;
  font-weight: 700 !important;
  background: rgba(255,240,180,0.40) !important;
  border-bottom: 2px solid #8B4A00 !important;
  box-shadow: inset 0 1px 0 rgba(255,235,160,0.30) !important;
}

/* ══════════════════════════════════════════════════════════
   VIDÉOS BUNNY — Bois Légendaire overrides
   ══════════════════════════════════════════════════════════ */

/* — Cartes vidéo = bois clair + shadow omnidirectionnelle — */
[data-theme='wood-legendary'] #view-giri-drive .gdv-card {
  background-color: rgba(255,245,220,0.93) !important;
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(212,164,76,0.28) !important;
  border-radius: 14px !important;
  box-shadow:
    0 0 0 1px rgba(212,164,76,0.15),
    0 0 8px  rgba(90,45,10,0.22),
    0 0 20px rgba(0,0,0,0.12) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-card:hover {
  box-shadow:
    0 0 0 1px rgba(212,164,76,0.38),
    0 0 12px rgba(90,45,10,0.30),
    0 0 28px rgba(0,0,0,0.16) !important;
  transform: translateY(-2px) scale(1.012) !important;
  border-color: rgba(212,164,76,0.50) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-card-title {
  color: #2A1200 !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-card-meta {
  color: rgba(42,18,0,0.58) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-card-delete {
  color: rgba(42,18,0,0.40) !important;
}

/* — Drop zone = bois body semi-transparent — */
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-zone {
  background-color: rgba(255,248,225,0.75) !important;
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
  border: 2px dashed rgba(212,164,76,0.50) !important;
  border-radius: 16px !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-zone:hover,
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-zone.gdv-dz-hover {
  border-color: rgba(212,164,76,0.85) !important;
  background-color: rgba(212,164,76,0.14) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-icon {
  color: #D4A44C !important;
  opacity: 1 !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-label {
  color: #2A1200 !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-drop-hint {
  color: rgba(42,18,0,0.60) !important;
}

/* — Bouton Parcourir = bois très clair — */
[data-theme='wood-legendary'] #view-giri-drive #gdv-browse-btn {
  background-color: rgba(255,248,225,0.95) !important;
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  color: #2A1200 !important;
  border: 1px solid rgba(212,164,76,0.45) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,235,160,0.50) !important;
  transition: box-shadow 0.18s, transform 0.15s !important;
}
[data-theme='wood-legendary'] #view-giri-drive #gdv-browse-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,235,160,0.60) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(212,164,76,0.70) !important;
}

/* — Boutons Nouveau dossier + Refresh = bois très clair — */
[data-theme='wood-legendary'] #view-giri-drive #gdv-new-folder-btn,
[data-theme='wood-legendary'] #view-giri-drive #gdv-refresh-btn {
  background-color: rgba(255,248,225,0.95) !important;
  background-image: url('textures/wood-light-premium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  color: #2A1200 !important;
  border: 1px solid rgba(212,164,76,0.42) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,235,160,0.50) !important;
  transition: box-shadow 0.18s, transform 0.15s !important;
}
[data-theme='wood-legendary'] #view-giri-drive #gdv-new-folder-btn:hover,
[data-theme='wood-legendary'] #view-giri-drive #gdv-refresh-btn:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,235,160,0.65) !important;
  transform: translateY(-1px) !important;
  border-color: rgba(212,164,76,0.68) !important;
}

/* — Header "Vidéos Bunny Stream" = même texture que la barre des onglets — */
[data-theme='wood-legendary'] #view-giri-drive .gdv-header {
  background-color: rgba(185,130,55,1.0) !important;
  background-image: url('textures/wood-medium.jpg?v=1774293320') !important;
  background-size: cover !important;
  background-position: center !important;
  background-blend-mode: normal !important;
  border: 1px solid rgba(212,164,76,0.32) !important;
  border-radius: 14px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,220,120,0.28) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-title {
  color: #FFFFFF !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-subtitle {
  color: rgba(255,255,255,0.82) !important;
}
[data-theme='wood-legendary'] #view-giri-drive .gdv-header-icon {
  background: rgba(255,240,180,0.40) !important;
  color: #2A1200 !important;
  border: 1px solid rgba(212,164,76,0.30) !important;
}


/* ── giri-mail.css ── */
/**
 * GIRI MAIL v3.0 — Premium 3-Column Layout
 * Fichier CSS dédié (hors bundle.min.css)
 */

/* ===== VIEW CONTAINER OVERRIDE ===== */
/* Use top+bottom (not height) so the element truly fills the viewport */
#view-mail.active {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: var(--sb-width-open, 260px) !important;
  z-index: 10 !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: hidden !important;
}

body.sidebar-collapsed #view-mail.active {
  left: var(--sb-width-closed, 64px) !important;
}

/* ===== LAYOUT — flex row (sidebar | list | reader) ===== */
.gm-layout {
  --gm-sidebar-w: 240px;
  --gm-list-w: 340px;
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  color: var(--text, #e2e8f0);
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  position: relative;
}

.gm-layout::before {
  content: '';
  position: absolute;
  top: -420px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(212,175,55,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ===== SIDEBAR ===== */
.gm-sidebar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-secondary, #0a0a14) 0%, var(--bg-primary, #080810) 100%);
  border-right: 1px solid rgba(255,255,255,0.05);
  padding: 20px 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: 1;
}

/* .gm-brand removed — replaced by .gm-acct-top account header */

/* ===== ACCOUNT TOP HEADER ===== */
.gm-acct-top {
  padding: 0 12px 12px;
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 10px;
}

.gm-acct-top-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 8px 8px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.15s ease;
  text-align: left;
}

.gm-acct-top-btn:hover {
  background: rgba(255,255,255,0.05);
}

.gm-acct-top-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gm-acct-top-name {
  font-size: 13px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.gm-acct-top-email {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.gm-acct-top-chevron {
  flex-shrink: 0;
  color: rgba(255,255,255,0.25);
  transition: transform 0.2s ease;
}

.gm-acct-top-btn:hover .gm-acct-top-chevron {
  color: rgba(255,255,255,0.5);
}

/* ===== COMPOSE BUTTON ===== */
.gm-compose-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 4px 14px 14px;
  padding: 11px 16px;
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  color: #000;
  border: none;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 20px rgba(212,175,55,0.3), 0 1px 0 rgba(255,255,255,0.15) inset;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}

.gm-compose-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  border-radius: inherit;
  pointer-events: none;
}

.gm-compose-btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(212,175,55,0.45);
}

.gm-compose-btn:active {
  transform: translateY(0) scale(0.99);
}

.gm-compose-btn svg { flex-shrink: 0; }

/* ===== NAV ===== */
.gm-nav {
  flex: 1;
  padding: 0 10px;
}

.gm-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-radius: 10px;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  transition: all 0.14s ease;
  user-select: none;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
  border: 1px solid transparent;
}

.gm-nav-item:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  transform: translateX(2px);
}

.gm-nav-item.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08));
  color: #d4af37;
  font-weight: 600;
  border: 1px solid rgba(212,175,55,0.15);
}

.gm-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: #d4af37;
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

.gm-nav-item.active svg { stroke: #d4af37; }

.gm-nav-item span:first-of-type { flex: 1; }

.gm-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 8px 12px;
}

/* ===== BADGES ===== */
.gm-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
  background: var(--accent, #6366f1);
  color: #fff;
  animation: gm-badge-pulse 2s ease-in-out infinite;
  letter-spacing: 0;
}

.gm-badge:empty { display: none; }

.gm-badge-gold { background: linear-gradient(135deg, #d4af37, #f0c84a); color: #000; animation: none; }
.gm-badge-amber { background: linear-gradient(135deg, #f59e0b, #fbbf24); color: #000; animation: none; }

@keyframes gm-badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0); }
}

/* ===== SIDEBAR FOOTER ===== */
.gm-sidebar-footer {
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
  margin-top: auto;
}

.gm-kbd-hints {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.gm-kbd-hints div {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: rgba(255,255,255,0.22);
}

.gm-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  font-size: 10px;
  font-family: inherit;
  color: rgba(255,255,255,0.38);
  background: rgba(255,255,255,0.05);
  line-height: 1.5;
  letter-spacing: 0.5px;
}

/* ===== RESIZE DIVIDERS ===== */
.gm-divider {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  z-index: 5;
  transition: background 0.15s;
}

.gm-divider:hover,
.gm-divider.gm-dragging {
  background: rgba(212,175,55,0.2);
}

.gm-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 28px;
  border-radius: 1px;
  background: rgba(255,255,255,0.08);
  transition: background 0.15s;
}

.gm-divider:hover::after { background: rgba(212,175,55,0.5); }

.gm-resizing { user-select: none !important; cursor: col-resize !important; }

/* ===== EMAIL LIST PANEL ===== */
.gm-list-panel {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
  background: var(--bg-secondary, #0c0c18);
  position: relative;
  z-index: 1;
}

.gm-list-header {
  padding: 16px 16px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  background: rgba(255,255,255,0.01);
}

.gm-search-wrap {
  position: relative;
  margin-bottom: 12px;
}

.gm-search-ico {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  stroke: rgba(255,255,255,0.25);
  pointer-events: none;
}

.gm-search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  background: rgba(255,255,255,0.05);
  border: none !important;
  border-radius: 10px;
  color: var(--text, #e2e8f0);
  font-size: 13px;
  outline: none;
  transition: all 0.18s ease;
  box-sizing: border-box;
}

.gm-search::placeholder { color: rgba(255,255,255,0.25); }

.gm-search:focus {
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.07);
  box-shadow: none !important;
}

.gm-list-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.28);
  padding-bottom: 12px;
}

.gm-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

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

.gm-email-list { flex: 1; overflow-y: auto; min-height: 0; }

/* ===== EMAIL ITEMS ===== */
.gm-email-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.12s ease;
  position: relative;
}

.gm-email-item:hover {
  background: rgba(255,255,255,0.035);
}

.gm-email-item.gm-selected {
  background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(212,175,55,0.05));
  border-left: 2px solid #d4af37;
}

.gm-email-item.gm-unread .gm-item-from {
  font-weight: 700;
  color: #fff;
}

.gm-email-item.gm-unread .gm-item-subject {
  font-weight: 600;
  color: rgba(255,255,255,0.9);
}

/* ===== AVATAR ===== */
.gm-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.gm-avatar-lg {
  width: 46px;
  height: 46px;
  font-size: 19px;
  border-radius: 13px;
}

.gm-item-avatar { flex-shrink: 0; padding-top: 1px; }
.gm-item-content { flex: 1; min-width: 0; }

.gm-item-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3px;
}

.gm-item-from {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.gm-item-date {
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}

.gm-item-subject {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}

.gm-item-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.27);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.gm-item-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 2px;
  opacity: 0;
  transition: opacity 0.12s;
  flex-shrink: 0;
}

.gm-email-item:hover .gm-item-actions { opacity: 1; }

.gm-item-star {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  color: rgba(255,255,255,0.25);
  transition: color 0.12s, transform 0.15s;
  display: flex;
  align-items: center;
}

.gm-item-star:hover { color: #d4af37; transform: scale(1.2); }
.gm-item-star.gm-starred { color: #d4af37; opacity: 1 !important; }

.gm-unread-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent, #6366f1);
  margin-top: 2px;
  box-shadow: 0 0 6px var(--accent, #6366f1);
}

/* ===== READER ===== */
.gm-reader {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: transparent;
  position: relative;
  z-index: 1;
}

.gm-reader::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,175,55,0.15), transparent);
  pointer-events: none;
}

.gm-reader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex: 1;
  gap: 12px;
  color: rgba(255,255,255,0.2);
  text-align: center;
  padding-bottom: 60px;
}

.gm-reader-empty-icon {
  font-size: 64px;
  opacity: 0.12;
  margin-bottom: 6px;
  filter: drop-shadow(0 0 30px rgba(212,175,55,0.2));
  animation: gm-float 4s ease-in-out infinite;
}

@keyframes gm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.gm-reader-empty p {
  font-size: 16px;
  font-weight: 600;
  color: rgba(255,255,255,0.22);
  margin: 0;
  letter-spacing: 0.2px;
}

.gm-reader-empty span {
  font-size: 12px;
  color: rgba(255,255,255,0.13);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gm-reader-empty kbd { display: none; }

.gm-reader-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Direct children of reader that should not grow */
.gm-reader-header,
.gm-reader-toolbar,
.gm-reader-subject,
.gm-reader-meta,
.gm-reader-reply-box,
.gm-quick-reply {
  flex-shrink: 0;
}

/* Quick reply bar */
.gm-quick-reply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.01);
}

.gm-quick-reply input {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  padding: 9px 14px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  outline: none;
}

.gm-quick-reply input:focus {
  border-color: rgba(212,175,55,0.35);
  background: rgba(255,255,255,0.07);
}

.gm-quick-reply-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(212,175,55,0.1));
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 8px;
  color: #d4af37;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}

.gm-quick-reply-send:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.35), rgba(212,175,55,0.2));
}

/* ===== READER TOOLBAR ===== */
.gm-reader-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
  gap: 8px;
  background: rgba(255,255,255,0.01);
  backdrop-filter: blur(10px);
}

.gm-reader-toolbar-left {
  display: flex;
  gap: 6px;
}

.gm-tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: rgba(255,255,255,0.5);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.14s ease;
  font-weight: 500;
}

.gm-tool-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.gm-tool-danger:hover {
  background: rgba(239,68,68,0.1);
  color: #f87171;
  border-color: rgba(239,68,68,0.2);
}

.gm-reply-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.08));
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 9px;
  color: #d4af37;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.2px;
}

.gm-reply-btn:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(212,175,55,0.15));
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212,175,55,0.2);
}

/* ===== READER CONTENT ===== */
.gm-reader-subject {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  padding: 28px 32px 18px;
  line-height: 1.3;
  flex-shrink: 0;
  letter-spacing: -0.5px;
}

.gm-reader-meta {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 0 32px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.gm-reader-meta-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  align-self: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  letter-spacing: 0.5px;
}

.gm-reader-meta-info { flex: 1; min-width: 0; }

.gm-reader-meta-sender {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-reader-meta-to {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-reader-meta-date {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  align-self: center;
  flex-shrink: 0;
}

.gm-reader-from {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.88);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 4px;
}

.gm-reader-addr {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  font-weight: 400;
}

.gm-reader-to {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  margin-bottom: 3px;
}

.gm-reader-date {
  font-size: 12px;
  color: rgba(255,255,255,0.28);
}

.gm-reader-body {
  background: #ffffff;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px 32px;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
  font-size: 15px;
}

.gm-reader-body iframe,
.gm-reader-body .gm-reader-text {
  width: 100%;
  min-height: 100%;
  display: block;
}

/* iframe inside reader body */
.gm-reader-body iframe {
  width: 100%;
  border: none;
  border-radius: 10px;
  background: #fff;
  display: block;
}

.gm-reader-body::-webkit-scrollbar { width: 4px; }
.gm-reader-body::-webkit-scrollbar-track { background: transparent; }
.gm-reader-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

.gm-reader-body a { color: #d4af37; text-decoration: none; border-bottom: 1px solid rgba(212,175,55,0.3); }
.gm-reader-body a:hover { border-bottom-color: #d4af37; }
.gm-reader-body img { max-width: 100%; border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,0.4); }
.gm-reader-body pre {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  padding: 18px;
  overflow-x: auto;
  font-size: 13px;
  color: rgba(255,255,255,0.68);
  line-height: 1.6;
}

/* ===== REPLY BOX ===== */
.gm-reader-reply-box {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 18px 32px 22px;
  flex-shrink: 0;
}

.gm-reply-inner {
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.gm-reply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  background: rgba(255,255,255,0.02);
}

.gm-reply-editor {
  min-height: 110px;
  max-height: 220px;
  overflow-y: auto;
  padding: 15px;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  outline: none;
  line-height: 1.7;
}

.gm-reply-editor:empty:before {
  content: attr(placeholder);
  color: rgba(255,255,255,0.18);
  pointer-events: none;
}

.gm-reply-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,0.05);
}

/* ===== COMPOSER MODAL ===== */
.gm-composer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 2000;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 24px;
  backdrop-filter: blur(8px);
}

.gm-composer-backdrop.open {
  display: flex;
}

.gm-composer {
  background: linear-gradient(160deg, var(--bg-secondary, #14142a), var(--bg-primary, #0f0f1e));
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  width: 580px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 32px 100px rgba(0,0,0,0.7),
    0 0 0 1px rgba(212,175,55,0.12),
    0 1px 0 rgba(255,255,255,0.05) inset;
  animation: gm-composer-slide 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

@keyframes gm-composer-slide {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Resize handle */
.gm-resize-handle {
  height: 6px;
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gm-resize-handle::after {
  content: '';
  width: 32px;
  height: 3px;
  background: rgba(255,255,255,0.12);
  border-radius: 2px;
}

.gm-resize-handle:hover::after {
  background: rgba(212,175,55,0.4);
}

.gm-composer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
}

.gm-composer-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.75);
}

.gm-composer-actions { display: flex; gap: 6px; }

.gm-icon-btn {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  transition: all 0.12s;
  font-size: 12px;
}

.gm-icon-btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.gm-btn-active {
  background: rgba(212,175,55,0.15) !important;
  color: #d4af37 !important;
  border-color: rgba(212,175,55,0.3) !important;
}

.gm-composer-fields {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
}

.gm-composer-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gm-composer-field:last-child { border-bottom: none; }

.gm-composer-field label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.3);
  width: 38px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.gm-field-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  font-family: inherit;
}

.gm-field-input::placeholder { color: rgba(255,255,255,0.22); }

.gm-to-wrap { flex: 1; position: relative; }
.gm-to-wrap .gm-field-input { width: 100%; }

/* ===== TO AUTOCOMPLETE ===== */
.gm-to-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-secondary, #14142a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  z-index: 10;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 4px;
}

.gm-to-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.1s;
}

.gm-to-item:hover,
.gm-to-item.gm-to-hover {
  background: rgba(212,175,55,0.1);
}

.gm-to-item-name {
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
}

.gm-to-item-email {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

.gm-to-item mark {
  background: rgba(212,175,55,0.25);
  color: #d4af37;
  padding: 0 1px;
  border-radius: 2px;
}

/* ===== COMPOSER BODY ===== */
.gm-composer-body {
  flex: 1;
  overflow: hidden;
  min-height: 170px;
}

.gm-body-editor {
  width: 100%;
  height: 100%;
  min-height: 170px;
  padding: 16px 20px;
  box-sizing: border-box;
  background: none;
  outline: none;
  font-size: 14px;
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  font-family: inherit;
  overflow-y: auto;
}

.gm-body-editor:empty:before {
  content: attr(placeholder);
  color: rgba(255,255,255,0.18);
  pointer-events: none;
}

/* ===== HTML MODE ===== */
.gm-html-mode {
  display: flex;
  flex: 1;
  min-height: 200px;
  gap: 0;
}

.gm-html-source-wrap,
.gm-html-preview-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gm-html-source-wrap { border-right: 1px solid rgba(255,255,255,0.07); }

.gm-html-label {
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  flex-shrink: 0;
}

.gm-html-source {
  flex: 1;
  resize: none;
  background: rgba(0,0,0,0.2);
  border: none;
  outline: none;
  padding: 14px;
  font-family: 'Fira Code', 'Consolas', monospace;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
}

.gm-html-preview {
  flex: 1;
  border: none;
  background: #fff;
}

/* ===== AI PANEL ===== */
.gm-ai-panel {
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(212,175,55,0.03);
}

.gm-ai-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.gm-ai-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #d4af37;
}

.gm-ai-panel-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gm-ai-prompt {
  width: 100%;
  min-height: 60px;
  max-height: 120px;
  resize: vertical;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  outline: none;
  font-family: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.gm-ai-prompt:focus {
  border-color: rgba(212,175,55,0.3);
}

.gm-ai-options {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gm-ai-select {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 7px 12px;
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  outline: none;
  cursor: pointer;
}

.gm-ai-generate-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.gm-ai-generate-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,175,55,0.3);
}

.gm-ai-generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ===== COMPOSER TOOLBAR ===== */
.gm-composer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 18px;
  border-top: 1px solid rgba(255,255,255,0.07);
  flex-shrink: 0;
  gap: 8px;
}

.gm-composer-format { display: flex; gap: 4px; }

.gm-fmt-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 7px;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  transition: all 0.12s;
}

.gm-fmt-btn:hover {
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.92);
}

.gm-attach-btn svg { stroke: currentColor; }

.gm-composer-send-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gm-send-hint {
  font-size: 11px;
  color: rgba(255,255,255,0.18);
}

.gm-send-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  color: #000;
  border: none;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 16px rgba(212,175,55,0.35);
  letter-spacing: 0.3px;
}

.gm-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(212,175,55,0.5);
}

.gm-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ===== ATTACHMENTS ===== */
.gm-attachments-zone {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  padding: 8px 18px;
  border-top: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.01);
  flex-shrink: 0;
}

.gm-attachments-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
}

.gm-pj-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  max-width: 200px;
}

.gm-pj-item.gm-pj-loading { opacity: 0.6; }
.gm-pj-item.gm-pj-error { border-color: rgba(239,68,68,0.3); }

.gm-pj-icon { flex-shrink: 0; display: flex; align-items: center; }

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

.gm-pj-size {
  font-size: 10px;
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}

.gm-pj-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.3);
  padding: 2px;
  display: flex;
  transition: color 0.12s;
}

.gm-pj-remove:hover { color: #f87171; }

.gm-pj-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: gm-spin 0.6s linear infinite;
}

/* ===== STATES ===== */
.gm-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px;
}

.gm-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255,255,255,0.06);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: gm-spin 0.65s linear infinite;
  box-shadow: 0 0 12px rgba(212,175,55,0.2);
}

.gm-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(0,0,0,0.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: gm-spin 0.65s linear infinite;
  vertical-align: middle;
}

@keyframes gm-spin { to { transform: rotate(360deg); } }

.gm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 72px 28px;
  gap: 14px;
  color: rgba(255,255,255,0.2);
  font-size: 13px;
}

/* ===== TOAST ===== */
.gm-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(14px);
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  opacity: 0;
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

.gm-toast-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.gm-toast-success {
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: #34d399;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(52,211,153,0.1);
}

.gm-toast-error {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  color: #f87171;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(248,113,113,0.1);
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 900px) {
  .gm-layout {
    grid-template-columns: 62px 1fr;
  }

  .gm-sidebar {
    align-items: center;
    padding: 12px 0;
  }

  .gm-brand-name,
  .gm-nav-item span,
  .gm-compose-btn span:not(.gm-badge),
  .gm-compose-btn kbd,
  .gm-sidebar-footer { display: none; }

  .gm-compose-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    margin: 4px 7px 12px;
    border-radius: 12px;
  }

  .gm-nav-item {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    border-radius: 12px;
    margin: 0 7px 3px;
  }

  .gm-nav-item.active::before { display: none; }

  .gm-reader { display: none; }

  .gm-divider { display: none; }
}

@media (max-width: 600px) {
  .gm-layout { grid-template-columns: 1fr; }
  .gm-sidebar { display: none; }
  .gm-divider { display: none; }
  .gm-list-panel { border-right: none; }

  .gm-composer {
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 85vh;
  }

  .gm-composer-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .gm-reader-subject { font-size: 18px; padding: 18px 18px 14px; }
  .gm-reader-meta { padding: 0 18px 14px; }
  .gm-reader-body { padding: 18px; }
}


/* ===== ACCOUNT SWITCHER — compact avatar button ===== */
.gm-acct-switcher {
  position: relative;
}
/* .gm-acct-top is the new top-level account header — see above */

.gm-acct-avatar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.18s ease;
}

.gm-acct-avatar-btn:hover .gm-acct-avatar {
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.45);
  transform: scale(1.08);
}

.gm-acct-avatar-btn:active .gm-acct-avatar {
  transform: scale(0.95);
}

.gm-acct-avatar {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}

.gm-account-dropdown {
  animation: gm-dropdown-in 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes gm-dropdown-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}



/* ===== MAIL READING PANE (mrp) — redesign ===== */
.mrp-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  overflow: hidden;
}
.mrp-header {
  flex-shrink: 0;
  padding: 18px 22px 0;
  background: var(--bg-secondary, #0c0c1a);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mrp-header-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.mrp-subject {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.35;
  word-break: break-word;
}
.mrp-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding-top: 2px;
}
.mrp-btn {
  padding: 5px 10px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.13s, color 0.13s;
  white-space: nowrap;
  line-height: 1.4;
}
.mrp-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.mrp-btn-primary {
  background: rgba(99,102,241,0.15);
  border-color: rgba(99,102,241,0.3);
  color: #a5b4fc;
}
.mrp-btn-primary:hover { background: rgba(99,102,241,0.28); color: #fff; }
.mrp-btn-danger:hover {
  background: rgba(244,63,94,0.18);
  border-color: rgba(244,63,94,0.35);
  color: #f43f5e;
}
.mrp-sender-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
}
.mrp-avatar {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.mrp-sender-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.mrp-sender-name {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrp-sender-email {
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mrp-date { font-size: 12px; color: rgba(255,255,255,0.28); flex-shrink: 0; }
.mrp-kbd-hint {
  font-size: 10px;
  color: rgba(255,255,255,0.14);
  padding: 5px 0 8px;
  letter-spacing: 0.01em;
}
.mrp-body-wrapper {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: transparent;
}
.mrp-paper {
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  min-height: 120px;
}
.mrp-paper-html { padding: 0; }
.mrp-text {
  padding: 24px 28px;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: #1a1a2e;
  word-break: break-word;
  white-space: pre-wrap;
}
.mrp-iframe {
  width: 100%;
  border: none;
  display: block;
  min-height: 200px;
}


/* ═══════════════════════════════════════════════════════════════════════════

/* ================================================================
   GIRI MAIL v4 — Premium Visual Redesign
   ================================================================ */

/* ── Email list rows ───────────────────────────────────────────── */
.gm-email-item {
  min-height: 56px;
  padding: 10px 16px 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.045);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: background 0.15s ease;
  cursor: pointer;
  position: relative;
}
.gm-email-item:hover {
  background: rgba(255,255,255,0.04);
}
.gm-email-item.gm-selected {
  background: rgba(212,175,55,0.07) !important;
  border-left: 3px solid #d4af37;
  padding-left: 9px;
}
.gm-email-item.unread {
  border-left: 3px solid #d4af37;
  padding-left: 9px;
}
.gm-email-item.unread .gm-email-sender {
  font-weight: 700;
  color: #ffffff;
}
.gm-email-item.unread .gm-email-subject {
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}

/* Sender / subject / preview / date */
.gm-email-sender {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}
.gm-email-subject {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-email-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gm-email-date {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.gm-email-top-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}
.gm-email-body {
  flex: 1;
  min-width: 0;
}

/* Checkbox — hidden until hover / selected */
.gm-cb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  flex-shrink: 0;
  padding-top: 2px;
}
.gm-email-cb {
  opacity: 0;
  transition: opacity 0.15s ease;
  accent-color: #d4af37;
  width: 15px;
  height: 15px;
  cursor: pointer;
  flex-shrink: 0;
  outline: none !important;
  box-shadow: none !important;
}
.gm-email-item:hover .gm-email-cb,
.gm-email-item.gm-selected .gm-email-cb {
  opacity: 1 !important;
}

/* ── Select-all row ─────────────────────────────────────────────── */
.gm-select-all-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: var(--bg-secondary, rgba(255,255,255,0.03));
  min-height: 36px;
}
#gm-select-all {
  accent-color: #d4af37;
  width: 15px;
  height: 15px;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}
.gm-select-all-label {
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  user-select: none;
}

/* ── Bulk action bar ────────────────────────────────────────────── */
@keyframes gm-bulk-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#gm-bulk-bar {
  background: rgba(22,22,28,0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(212,175,55,0.25) !important;
  border-radius: 10px !important;
  margin: 6px 10px !important;
  padding: 7px 12px !important;
  display: flex;
  align-items: center !important;
  gap: 6px !important;
  animation: gm-bulk-slide-in 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
#gm-bulk-count {
  font-size: 11px;
  font-weight: 700;
  background: #d4af37;
  color: #1a1500;
  padding: 2px 8px;
  border-radius: 20px;
  margin-right: 4px;
  white-space: nowrap;
}
#gm-bulk-bar button {
  font-size: 12px !important;
  padding: 5px 11px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.8) !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
#gm-bulk-bar button:hover {
  background: rgba(212,175,55,0.18) !important;
  border-color: rgba(212,175,55,0.45) !important;
  color: #d4af37 !important;
}
#gm-bulk-bar button:last-child {
  margin-left: auto;
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 14px !important;
  padding: 4px 8px !important;
}
#gm-bulk-bar button:last-child:hover {
  color: rgba(255,255,255,0.8) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ── Search bar ─────────────────────────────────────────────────── */
.gm-search {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.04) !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  margin: 8px 10px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.gm-search:focus-within {
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: none !important;
}
.gm-search-icon {
  color: rgba(255,255,255,0.3);
  flex-shrink: 0;
}
#gm-search-input {
  flex: 1;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 13px;
  color: rgba(255,255,255,0.75);
  padding: 9px 0 !important;
  min-width: 0;
}
#gm-search-input::placeholder {
  opacity: 0;
}

/* ── Sidebar ────────────────────────────────────────────────────── */
.gm-nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.gm-nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
}
.gm-nav-item.active,
.gm-nav-item[data-active="true"] {
  background: rgba(212,175,55,0.08) !important;
  color: #d4af37 !important;
  border-left-color: #d4af37 !important;
  font-weight: 600;
}
.gm-nav-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 6px 0;
}

/* ── Reading pane empty state ───────────────────────────────────── */
.gm-reader-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 10px;
  padding: 40px;
  text-align: center;
}
.gm-reader-empty-icon {
  font-size: 80px;
  opacity: 0.22;
  line-height: 1;
}
.gm-reader-empty p:first-of-type {
  font-size: 15px;
  color: rgba(255,255,255,0.4);
  margin: 0;
}
.gm-reader-empty kbd {
  display: none !important;
}

/* ── Reader toolbar ─────────────────────────────────────────────── */
.gm-reader-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.7);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gm-reader-toolbar-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.9);
}
.gm-reader-toolbar-btn.primary {
  background: rgba(212,175,55,0.15);
  border-color: rgba(212,175,55,0.4);
  color: #d4af37;
}
.gm-reader-toolbar-btn.primary:hover {
  background: rgba(212,175,55,0.25);
}
.gm-reader-toolbar-spacer {
  flex: 1;
}

/* ── Star button ────────────────────────────────────────────────── */
.gm-star-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.25);
  cursor: pointer;
  padding: 2px;
  font-size: 14px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.gm-star-btn:hover,
.gm-star-btn.starred {
  color: #d4af37;
}

/* ── Badge (unread count) ───────────────────────────────────────── */
.gm-badge {
  font-size: 10px;
  font-weight: 700;
  background: #d4af37;
  color: #1a1500;
  padding: 1px 6px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* ── IMAP folder items ──────────────────────────────────────────── */
.imap-folder-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.imap-folder-item:hover {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
}
.imap-folder-item.active {
  background: rgba(212,175,55,0.08);
  color: #d4af37;
  border-left-color: #d4af37;
  font-weight: 600;
}

/* ================================================================
   GIRI MAIL — Targeted fixes (cache-bust: must take effect)
   Applied with !important to override all previous rules
   ================================================================ */

/* Unread rows: 3px gold left border + bold white sender */
.gm-email-item.unread {
  border-left: 3px solid #d4af37 !important;
  padding-left: 9px !important;
}
.gm-email-item.unread .gm-email-sender {
  font-weight: 700 !important;
  color: #ffffff !important;
}
.gm-email-item.unread .gm-email-subject {
  font-weight: 600 !important;
  color: rgba(255,255,255,0.85) !important;
}

/* Sidebar active item: real border-left, kill ::before approach */
.gm-nav-item.active::before {
  display: none !important;
}
.gm-nav-item {
  border-left: 3px solid transparent !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 0 8px 8px 0 !important;
  padding-left: 13px !important;
}
.gm-nav-item.active {
  border-left: 3px solid #d4af37 !important;
  background: rgba(212,175,55,0.1) !important;
  color: #d4af37 !important;
}
.gm-nav-item:hover {
  transform: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   GIRI MAIL — Multi-Select & Reading-Pane Polish  (appended)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── List header row (select-all + title + count) ─────────────────────── */
.gm-list-header {
  padding: 12px 16px 0;
}

.gm-list-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0 10px;
}

.gm-list-count {
  font-size: 11px;
  color: rgba(255,255,255,0.22);
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
}

/* ── Select-all checkbox wrapper ──────────────────────────────────────── */
.gm-select-all-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.12s;
}

.gm-select-all-wrap:hover {
  background: rgba(212,175,55,0.1);
}

#gm-select-all {
  accent-color: #d4af37;
  cursor: pointer;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Filter pills ─────────────────────────────────────────────────────── */
.gm-filters {
  display: flex;
  gap: 5px;
  padding: 8px 16px 18px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.gm-filter-pill {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,0.32);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
  font-family: inherit;
  line-height: 1.5;
}

.gm-filter-pill:hover {
  color: rgba(255,255,255,0.68);
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.08);
}

.gm-filter-pill.active {
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.08));
  border-color: rgba(212,175,55,0.28);
  color: #d4af37;
  font-weight: 600;
}

/* ── Email row sub-elements (defined in giri-mail.js HTML) ──────────── */
.gm-email-body {
  flex: 1;
  min-width: 0;
}

.gm-email-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.gm-email-sender {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gm-email-item.unread .gm-email-sender {
  font-weight: 700;
  color: #fff;
}

.gm-email-date {
  font-size: 11px;
  color: rgba(255,255,255,0.26);
  white-space: nowrap;
  flex-shrink: 0;
}

.gm-email-subject {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}

.gm-email-item.unread .gm-email-subject {
  font-weight: 600;
  color: rgba(255,255,255,0.86);
}

.gm-email-preview {
  font-size: 12px;
  color: rgba(255,255,255,0.24);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

/* ── Checkbox per row ─────────────────────────────────────────────────── */
.gm-cb-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  align-self: stretch;
  cursor: pointer;
  padding: 0 4px 0 2px;
}

.gm-email-cb {
  accent-color: #d4af37;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.14s ease;
  outline: none !important;
  box-shadow: none !important;
}

/* Show checkbox on row hover or when checked */
.gm-email-item:hover .gm-email-cb,
.gm-email-item.gm-selected .gm-email-cb {
  opacity: 1 !important;
}

/* ── Selected row — gold tint + left accent ───────────────────────────── */
/* Overrides the existing rule to ensure specificity */
.gm-email-item.gm-selected {
  background: linear-gradient(90deg,
    rgba(212,175,55,0.1) 0%,
    rgba(212,175,55,0.05) 40%,
    rgba(212,175,55,0.02) 100%) !important;
  border-left: 3px solid #d4af37 !important;
  padding-left: 13px !important; /* compensate 3px border so content doesn't shift */
}

.gm-email-item.gm-selected .gm-email-sender { color: rgba(255,255,255,0.85); }

/* ── Bulk action bar ──────────────────────────────────────────────────── */
@keyframes gm-bulk-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gm-bulk-bar {
  /* JS sets display:none/flex — we only style the visible state */
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: linear-gradient(135deg,
    rgba(212,175,55,0.09) 0%,
    rgba(212,175,55,0.04) 100%);
  border-bottom: 1px solid rgba(212,175,55,0.18);
  animation: gm-bulk-slide-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Count pill */
#gm-bulk-count {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #d4af37 !important;
  background: rgba(212,175,55,0.12) !important;
  border: 1px solid rgba(212,175,55,0.22) !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  min-width: auto !important;
  white-space: nowrap;
  flex-shrink: 0;
}

/* All buttons in the bulk bar */
#gm-bulk-bar button {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.13s ease !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  letter-spacing: 0.1px !important;
}

/* Marquer lu / Non lu */
#gm-bulk-bar button:nth-child(2),
#gm-bulk-bar button:nth-child(3) {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.58) !important;
}

#gm-bulk-bar button:nth-child(2):hover,
#gm-bulk-bar button:nth-child(3):hover {
  background: rgba(255,255,255,0.09) !important;
  color: rgba(255,255,255,0.9) !important;
  border-color: rgba(255,255,255,0.15) !important;
  transform: translateY(-1px) !important;
}

/* Supprimer */
#gm-bulk-bar button:nth-child(4) {
  background: rgba(239,68,68,0.06) !important;
  border: 1px solid rgba(239,68,68,0.22) !important;
  color: #fca5a5 !important;
}

#gm-bulk-bar button:nth-child(4):hover {
  background: rgba(239,68,68,0.14) !important;
  border-color: rgba(239,68,68,0.4) !important;
  color: #f87171 !important;
  transform: translateY(-1px) !important;
}

/* Dismiss ✕ */
#gm-bulk-bar button:last-child {
  background: none !important;
  border: none !important;
  color: rgba(255,255,255,0.28) !important;
  padding: 4px 6px !important;
  margin-left: auto !important;
  font-size: 14px !important;
}

#gm-bulk-bar button:last-child:hover {
  color: rgba(255,255,255,0.68) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: none !important;
}

/* ── Reading pane toolbar buttons ─────────────────────────────────────── */
.gm-reader-toolbar {
  gap: 6px;
  flex-wrap: nowrap;
}

.gm-reader-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.52);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.14s ease;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.1px;
}

.gm-reader-toolbar-btn:hover {
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.gm-reader-toolbar-btn.primary {
  background: linear-gradient(135deg, rgba(212,175,55,0.16), rgba(212,175,55,0.08));
  border-color: rgba(212,175,55,0.28);
  color: #d4af37;
  font-weight: 700;
}

.gm-reader-toolbar-btn.primary:hover {
  background: linear-gradient(135deg, rgba(212,175,55,0.26), rgba(212,175,55,0.14));
  border-color: rgba(212,175,55,0.4);
  box-shadow: 0 3px 14px rgba(212,175,55,0.18);
}

.gm-reader-toolbar-spacer {
  flex: 1;
}

/* ── Reader empty state — better visibility + vertical centering ────── */
.gm-reader-empty {
  padding-bottom: 40px; /* shift upward slightly to feel centered */
}

.gm-reader-empty-icon {
  opacity: 0.22; /* was 0.12 */
  font-size: 56px;
}

.gm-reader-empty p:first-of-type {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255,255,255,0.38); /* was 0.22 */
  margin: 0;
}

.gm-reader-empty p:last-of-type {
  font-size: 13px;
  color: rgba(255,255,255,0.22); /* was ~0.13 via span */
  margin: 0;
}

.gm-reader-empty kbd {
  color: rgba(255,255,255,0.42);
  border-color: rgba(255,255,255,0.16);
}

/* ── Star / trash buttons in email rows ─────────────────────────────── */
.gm-star-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 3px;
  color: rgba(255,255,255,0.22);
  font-size: 13px;
  line-height: 1;
  transition: color 0.12s, transform 0.15s;
  flex-shrink: 0;
}

.gm-star-btn:hover { color: #d4af37; transform: scale(1.2); }
.gm-star-btn.starred { color: #d4af37; }

.gm-trash-btn svg { pointer-events: none; }


/* ===== v3.1 VISUAL POLISH — Premium native-app feel ===== */

/* 1. Email list rows — breathing room + unread amber dot */
.gm-email-item {
  padding: 17px 16px; /* +4px top/bottom vs v3.0's 13px */
}

/* Unread: sender in full white, bold — add amber dot via ::before */
.gm-email-item.gm-unread .gm-item-from {
  position: relative;
  padding-left: 10px;
}

.gm-email-item.gm-unread .gm-item-from::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d4af37;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(212,175,55,0.75);
}

/* 2. Reading pane body card — radius, shadow, subtle border */
.gm-reader-body iframe {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* 3. Action buttons bar — Répondre as solid-amber primary, trash separated */
.gm-reply-btn {
  background: linear-gradient(135deg, #d4af37, #f0c84a) !important;
  border-color: transparent !important;
  color: #000 !important;
  box-shadow: 0 3px 14px rgba(212,175,55,0.4);
}

.gm-reply-btn:hover {
  background: linear-gradient(135deg, #e0bc3e, #f7d55e) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(212,175,55,0.55) !important;
}

/* Trash button — last in toolbar, separated from Archive with auto margin */
.gm-reader-toolbar > .gm-reader-toolbar-btn:last-child {
  margin-left: auto;
}

/* Tighten gap between remaining tool buttons */
.gm-reader-toolbar-left {
  gap: 6px;
}

/* 4. Quick reply bar — pill shape, better contrast */
.gm-quick-reply input {
  border-radius: 24px;
  padding: 9px 18px;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
}

.gm-quick-reply input::placeholder {
  color: rgba(255,255,255,0.42);
}

.gm-quick-reply input:focus {
  border-color: rgba(212,175,55,0.4);
  background: rgba(255,255,255,0.09);
}

/* Send button: solid amber circle */
.gm-quick-reply-send {
  background: linear-gradient(135deg, #d4af37, #f0c84a);
  border-color: transparent;
  color: #000;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(212,175,55,0.4);
}

.gm-quick-reply-send:hover {
  background: linear-gradient(135deg, #e0bc3e, #f7d55e);
  box-shadow: 0 4px 14px rgba(212,175,55,0.6);
  transform: scale(1.08);
}

/* 5. Sidebar account header — more visible separator before compose btn */
.gm-acct-top {
  border-top: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 16px;
  margin-bottom: 14px;
}


/* ===== v3.2 BUG FIXES ===== */

/* Fix 1 — .gm-reader-empty was not filling .gm-reader because a later rule
   dropped flex:1. Restore it here (wins the cascade). */
.gm-reader-empty {
  flex: 1 !important;
  min-height: 0;
}
/* Also ensure .gm-reader itself is a flex column that can stretch */
.gm-reader {
  display: flex !important;
  flex-direction: column !important;
}

/* Fix 2 — Small global floating widgets (Pomodoro, flow indicator)
   appear inside the reading pane area when no email is selected.
   Lower their z-index below the mail view (z-index:10) so they hide
   behind the full-screen mail layout. */
body:has(#view-mail.active) .pomodoro-widget,
body:has(#view-mail.active) .gw-flow-indicator {
  z-index: 8 !important;
}


/* ===== v3.3 CSS FIXES ===== */

/* Fix 1 — Checkboxes: remove browser focus ring / outline / box-shadow
   Keep only accent-color for the gold checkmark. */
#gm-select-all,
.gm-email-cb {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}
#gm-select-all:focus,
#gm-select-all:focus-visible,
.gm-email-cb:focus,
.gm-email-cb:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Fix 2 — Search bar: no visible border at rest, faint on focus */
.gm-search {
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.gm-search:focus {
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 0 0 2px rgba(212,175,55,0.06) !important;
}

/* Fix 3 — Gold line above account header: remove any top border/line,
   and soften the compose button upward glow that bleeds into the header. */
.gm-acct-top {
  border-top: none !important;
}
.gm-compose-btn {
  box-shadow: 0 4px 12px rgba(212,175,55,0.18), 0 1px 0 rgba(255,255,255,0.12) inset !important;
}


/* ── notes-word.css ── */
/**
 * NOTES WORD STYLE v7.0
 * ProductiveApp — Word-like editor design
 * Overrides the old editor styles with a clean, modern, Word-inspired layout
 */

/* ===== RESET LEGACY CONFLICTING STYLES ===== */
.notes-layout { display: none !important; }

/* ===== MAIN APP CONTAINER ===== */
.notes-app {
    display: flex;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    background: var(--bg-primary, #0d0e1a);
    color: var(--text-primary, #e4e7ec);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ===== SIDEBAR ===== */
.notes-app-sidebar {
    width: 260px;
    min-width: 200px;
    max-width: 380px;
    flex-shrink: 0;
    background: var(--bg-secondary, #111827);
    border-right: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative;
    transition: width 0.25s ease;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* Sidebar Header */
.notes-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.notes-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-sidebar-brand svg {
    color: var(--accent, #5865f2);
    opacity: 0.9;
}

.notes-brand-label {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.notes-count-badge {
    background: rgba(88,101,242,0.18);
    color: var(--accent, #5865f2);
    font-size: 11px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 20px;
}

.notes-sidebar-header-btns {
    display: flex;
    gap: 4px;
}

.notes-header-icon-btn {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
}

.notes-header-icon-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
}

.notes-header-icon-btn.primary {
    background: var(--accent, #5865f2);
    color: white;
}

.notes-header-icon-btn.primary:hover {
    background: var(--accent-hover, #4752c4);
    transform: scale(1.05);
}

/* Search */
.notes-sidebar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    flex-shrink: 0;
}

.notes-search-icon {
    color: var(--text-muted, #6b7280);
    flex-shrink: 0;
    display: flex;
}

.notes-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #e4e7ec);
    font-size: 13px;
    font-family: inherit;
}

.notes-search-input::placeholder {
    color: var(--text-muted, #6b7280);
}

/* Single scrollable area for sidebar content */
.notes-sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.notes-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.notes-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.notes-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
.notes-sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* Folders section */
.notes-folders-section {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.notes-section-header {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text-secondary, #9ca3af);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.15s ease;
    user-select: none;
}

.notes-section-header:hover {
    color: var(--text-primary, #e4e7ec);
}

.notes-section-header svg {
    flex-shrink: 0;
}

.notes-section-toggle {
    margin-left: auto;
}

.notes-folders-tree {
    padding: 0 8px 8px;
}

.notes-folders-tree.collapsed {
    display: none;
}

/* Folder items (from NotesSidebar) */
.sidebar-folder-item { margin: 1px 0; }
.sidebar-folder-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.15s ease;
    color: var(--text-primary, #e4e7ec);
}
.sidebar-folder-header:hover { background: rgba(255,255,255,0.06); }
.sidebar-folder-name { flex: 1; }
.sidebar-folder-count {
    font-size: 10px;
    color: var(--text-muted, #6b7280);
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 8px;
}

/* Notes list section (flat — scrolled by parent .notes-sidebar-scroll) */
.notes-list-section-flat {
    padding-bottom: 12px;
}

.notes-section-header-label {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #6b7280);
}

.notes-list {
    padding: 4px 8px;
}

/* Note item */
.note-item {
    border-radius: 7px;
    cursor: pointer;
    margin: 1px 0;
    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;
    border: 1px solid transparent;
}

.note-item:hover {
    background: rgba(128,128,128,0.08);
    border-color: rgba(128,128,128,0.06);
}

.note-item.active {
    background: color-mix(in srgb, var(--accent, #5865f2) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, #5865f2) 30%, transparent);
}

.note-item.pinned { order: -1; }

.note-item-inner {
    padding: 8px 10px;
}

.note-item-title-row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
}

.note-item-pin { color: var(--accent, #5865f2); flex-shrink: 0; }

.note-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
    overflow-y: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.note-item.active .note-item-title { color: var(--accent, #5865f2); font-weight: 600; }

.note-item-preview {
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
    margin: 0 0 3px;
    overflow-y: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.note-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-item-date {
    font-size: 10.5px;
    color: var(--text-muted, #6b7280);
}

.note-item-folder {
    font-size: 10px;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary, #9ca3af);
    padding: 1px 5px;
    border-radius: 4px;
}

/* Empty notes list */
.notes-list-empty {
    padding: 20px 12px;
    text-align: center;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
}
.notes-list-empty-btn {
    margin-top: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    font-size: 12px;
    font-family: inherit;
    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;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.notes-list-empty-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary, #e4e7ec); }

/* New folder bar (inside folder tree) */
.sidebar-new-folder-bar {
    padding: 4px 8px 6px;
}

.sidebar-btn-sm {
    padding: 4px 10px !important;
    font-size: 11.5px !important;
    gap: 4px !important;
}

/* ===== RESIZE HANDLE ===== */
.notes-sidebar-resizer {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s;
}

.notes-sidebar-resizer:hover,
.notes-sidebar-resizer.dragging {
    background: var(--accent, #5865f2);
}

.notes-sidebar-resizer::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -3px; right: -3px;
}

/* ===== EDITOR AREA ===== */
.notes-app-editor {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary, #0a0e1a);
    overflow-y: auto;
}

/* ===== EMPTY STATE ===== */
.notes-empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-muted, #6b7280);
    padding: 40px;
    text-align: center;
}

.notes-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.notes-empty-icon svg {
    width: 32px;
    height: 32px;
    opacity: 0.4;
}

.notes-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    margin: 0;
}

.notes-empty-sub {
    font-size: 13px;
    color: var(--text-muted, #6b7280);
    max-width: 280px;
    line-height: 1.5;
    margin: 0;
}

.notes-empty-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: var(--accent, #5865f2);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
    margin-top: 8px;
}

.notes-empty-btn:hover {
    background: var(--accent-hover, #4752c4);
    transform: translateY(-1px);
}

/* ===== DOCUMENT WRAPPER ===== */
.notes-document-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

/* Sticky toolbar */
.notes-toolbar-sticky {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: var(--bg-secondary, #111827);
    position: sticky;
    top: 0;
    z-index: 10;
    min-height: 44px;
}

/* Scrollable document area */
.notes-document-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bg-primary, #0d0e1a);
    padding: 40px 32px 60px;
    display: flex;
    justify-content: center;
}

.notes-document-scroll::-webkit-scrollbar { width: 7px; }
.notes-document-scroll::-webkit-scrollbar-track { background: transparent; }
.notes-document-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.notes-document-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Document page (Word-like — elevated card effect) */
.notes-document-page {
    width: 100%;
    max-width: 820px;
    min-height: calc(100vh - 220px);
    display: flex;
    flex-direction: column;
    background: var(--doc-bg, #1a1f35);
    border-radius: 10px;
    padding: 52px 64px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.notes-document-page:focus-within {
    box-shadow: 0 12px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(88,101,242,0.2);
}

@media (max-width: 900px) {
    .notes-document-scroll { padding: 24px 16px; }
    .notes-document-page { padding: 32px 28px; border-radius: 8px; }
}

@media (max-width: 600px) {
    .notes-document-page { padding: 24px 18px; border-radius: 0; }
}

/* Document header: title + meta */
.notes-doc-header {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.notes-doc-title-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* Title (auto-resize textarea) */
.note-title-h1 {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 30px;
    font-weight: 800;
    color: var(--text-primary, #f0f2f5);
    font-family: 'Inter', -apple-system, sans-serif;
    line-height: 1.25;
    letter-spacing: -0.03em;
    resize: none;
    overflow-y: auto;
    min-height: 44px;
    padding: 4px 0;
}

.note-title-h1::placeholder {
    color: rgba(255,255,255,0.18);
    font-weight: 400;
}

.notes-doc-header-actions {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    flex-shrink: 0;
    padding-top: 4px;
}

.note-action-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary, #9ca3af);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    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;
    white-space: nowrap;
}

.note-action-pill:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #e4e7ec); }
.note-action-pill.public { color: #34d399; border-color: rgba(52,211,153,0.2); }
.note-action-pill.public:hover { background: rgba(52,211,153,0.08); }
.note-action-pill.danger:hover { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.2); }

/* Meta row */
.notes-doc-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
}

.notes-doc-date { }
.notes-doc-sep { opacity: 0.4; }

/* Content area */
.notes-doc-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    position: relative;
}

.note-content-area {
    width: 100%;
    min-height: calc(100vh - 350px);
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #dde2ef);
    font-family: 'Inter', 'Georgia', serif;
    font-size: 15.5px;
    line-height: 1.85;
    resize: none;
    overflow-y: auto;
    letter-spacing: 0.01em;
    display: block;
    caret-color: var(--accent, #5865f2);
}

.note-content-area::placeholder {
    color: rgba(255,255,255,0.15);
    font-style: italic;
    font-family: inherit;
}

/* ===== DOCUMENT FOOTER (stats bar like GIRI Word) ===== */
.notes-document-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 28px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: color-mix(in srgb, var(--bg-primary, #0d0e1a) 90%, black);
    font-size: 11px;
    color: var(--text-muted, #475569);
    flex-shrink: 0;
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    transition: color 0.3s ease;
}

.save-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.save-indicator.saved { color: #34d399; }
.save-indicator.saved .save-dot { background: #34d399; }
.save-indicator.saving { color: #f59e0b; animation: pulse 1s infinite; }
.save-indicator.saving .save-dot { background: #f59e0b; animation: pulse 1s infinite; }
.save-indicator.unsaved { color: #f87171; }
.save-indicator.unsaved .save-dot { background: #f87171; }

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.notes-footer-center {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
}

.notes-footer-right {}

.notes-footer-btn {
    padding: 4px 12px;
    border: 1px solid rgba(88,101,242,0.3);
    border-radius: 5px;
    background: transparent;
    color: rgba(165,173,255,0.8);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    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;
}

.notes-footer-btn:hover {
    background: rgba(88,101,242,0.12);
    color: #a5adff;
}

/* ===== TOOLBAR (GIRI Word style) ===== */
.notes-toolbar {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    gap: 1px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    min-height: 40px;
}

.notes-toolbar::-webkit-scrollbar { display: none; }

.toolbar-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #94a3b8);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
    flex-shrink: 0;
    padding: 0;
    position: relative;
}

.toolbar-btn:hover {
    background: rgba(128,128,128,0.12);
    color: var(--text-primary, #e4e7ec);
}

.toolbar-btn.active {
    background: color-mix(in srgb, var(--accent, #5865f2) 20%, transparent);
    color: var(--accent-light, #818cf8);
}

.toolbar-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.08);
    margin: 0 6px;
    flex-shrink: 0;
}

.toolbar-spacer { flex: 1; }

/* AI toolbar button */
.toolbar-btn-ai {
    background: linear-gradient(135deg, rgba(88,101,242,0.2) 0%, rgba(147,51,234,0.2) 100%);
    border: 1px solid rgba(88,101,242,0.3);
    color: #a5adff !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    width: auto;
    padding: 0 10px;
    gap: 4px;
}

.toolbar-btn-ai:hover {
    background: linear-gradient(135deg, rgba(88,101,242,0.35) 0%, rgba(147,51,234,0.35) 100%) !important;
    border-color: rgba(88,101,242,0.5) !important;
    color: white !important;
}

/* Mode buttons */
.toolbar-mode-group { display: flex; gap: 1px; }
.toolbar-mode-btn { border-radius: 4px; }
.toolbar-mode-btn.active {
    background: rgba(88,101,242,0.18);
    color: var(--accent, #5865f2);
}

/* Right toolbar group */
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

/* ===== AI ORGANIZE PANEL ===== */
.notes-ai-organize-panel {
    position: absolute;
    bottom: 60px;
    left: 12px;
    right: 12px;
    background: var(--bg-tertiary, #161b2e);
    border: 1px solid rgba(88,101,242,0.25);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    z-index: 1000;
    overflow-y: auto;
}

.ai-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.ai-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.ai-panel-icon {
    font-size: 16px;
    color: #a5adff;
}

.ai-panel-close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
}

.ai-panel-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #e4e7ec); }

.ai-panel-body {
    padding: 14px;
    max-height: 380px;
    overflow-y: auto;
}

.ai-panel-desc {
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    margin: 0 0 12px;
    line-height: 1.5;
}

.ai-panel-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-option-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    transition: background 0.15s;
}

.ai-option-card:hover { background: rgba(255,255,255,0.06); }

.ai-option-card.featured {
    background: linear-gradient(135deg, rgba(88,101,242,0.08) 0%, rgba(147,51,234,0.08) 100%);
    border-color: rgba(88,101,242,0.2);
}

.ai-option-icon { font-size: 18px; flex-shrink: 0; }

.ai-option-info { flex: 1; min-width: 0; }
.ai-option-info strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-primary, #e4e7ec); }
.ai-option-info p { font-size: 11px; color: var(--text-muted, #6b7280); margin: 2px 0 0; }

.ai-option-btn {
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    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;
    white-space: nowrap;
}

.ai-option-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
}

.ai-option-btn.primary {
    background: linear-gradient(135deg, #5865f2, #9333ea);
    border-color: transparent;
    color: white;
}

.ai-option-btn.primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Progress */
.ai-progress-area {
    margin-top: 12px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.ai-progress-bar-wrapper {
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 2px;
    overflow-y: auto;
    margin-bottom: 8px;
}

.ai-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #5865f2, #9333ea);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.ai-progress-label {
    font-size: 11.5px;
    color: var(--text-muted, #6b7280);
    margin: 0;
}

/* Result */
.ai-result-area { margin-top: 10px; }
.ai-result-success {
    padding: 10px 12px;
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: #34d399;
    line-height: 1.7;
}
.ai-result-success ul { margin: 6px 0 0; padding-left: 16px; }
.ai-result-error {
    padding: 10px 12px;
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    border-radius: 8px;
    font-size: 12.5px;
    color: #ef4444;
}

/* ===== AI MINI PANEL ===== */
.notes-ai-mini-panel {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 320px;
    background: var(--bg-tertiary, #161b2e);
    border: 1px solid rgba(88,101,242,0.3);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7);
    z-index: 100;
    overflow-y: auto;
    animation: slideInRight 0.2s ease;
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.mini-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    font-size: 13px;
    font-weight: 600;
    color: #a5adff;
}

.mini-panel-header button {
    border: none;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
}

.mini-panel-header button:hover { background: rgba(255,255,255,0.08); color: var(--text-primary); }

.mini-panel-body { padding: 14px; }

.mini-panel-loading {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted, #6b7280);
    padding: 10px 0;
}

.mini-panel-result { display: flex; flex-direction: column; gap: 9px; }

.mini-result-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.mini-result-label {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
}

.mini-result-value {
    font-size: 12.5px;
    color: var(--text-primary, #e4e7ec);
}

.mini-result-text {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.5;
}

.mini-result-score {
    font-size: 16px;
    font-weight: 700;
    color: #fbbf24;
}

.mini-result-apply {
    border: 1px solid rgba(88,101,242,0.3);
    background: transparent;
    border-radius: 5px;
    color: #a5adff;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    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;
}

.mini-result-apply:hover { background: rgba(88,101,242,0.12); }

.mini-result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.mini-tag {
    padding: 2px 7px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
}

.mini-panel-actions {
    display: flex;
    gap: 7px;
    margin-top: 4px;
}

.mini-action-btn {
    flex: 1;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    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;
}

.mini-action-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.mini-action-btn.primary {
    background: linear-gradient(135deg, #5865f2, #9333ea);
    border-color: transparent;
    color: white;
}
.mini-action-btn.primary:hover { opacity: 0.9; }

.mini-panel-error {
    font-size: 12px;
    color: #ef4444;
    text-align: center;
    padding: 8px;
}

/* ===== SIDEBAR CONTEXT MENU ===== */
.sidebar-context-menu {
    position: fixed;
    background: var(--bg-tertiary, #1a1f35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    z-index: 1200;
    padding: 6px;
    min-width: 180px;
    animation: fadeInScale 0.12s ease;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary, #e4e7ec);
    transition: background 0.12s;
}

.context-menu-item:hover {
    background: rgba(255,255,255,0.08);
}

.context-menu-item.context-menu-danger { color: #ef4444; }
.context-menu-item.context-menu-danger:hover { background: rgba(239,68,68,0.12); }

.context-menu-label {
    padding: 6px 12px 4px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
    user-select: none;
}

.context-menu-divider {
    height: 1px;
    background: rgba(255,255,255,0.06);
    margin: 4px 8px;
}

/* Note dragging state */
.note-item.dragging {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--accent, #5865f2);
}

/* ===== FOLDER POPUP MODAL ===== */
.nfp-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInScale 0.15s ease;
}

.nfp-modal {
    background: var(--bg-tertiary, #1a1f35);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.7);
    width: 380px;
    max-width: 90vw;
    overflow-y: auto;
}

.nfp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.nfp-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #f0f2f5);
}

.nfp-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    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;
}

.nfp-close:hover { background: rgba(255,255,255,0.08); color: var(--text-primary, #e4e7ec); }

.nfp-body {
    padding: 18px 22px;
}

.nfp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
    margin-bottom: 6px;
}

.nfp-input {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: var(--text-primary, #e4e7ec);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.nfp-input:focus {
    border-color: var(--accent, #5865f2);
    box-shadow: 0 0 0 3px rgba(88,101,242,0.15);
}

.nfp-colors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nfp-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

.nfp-color-dot:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.nfp-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 22px 18px;
    border-top: 1px solid rgba(255,255,255,0.07);
}

.nfp-btn {
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    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;
    border: none;
}

.nfp-btn-cancel {
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    border: 1px solid rgba(255,255,255,0.1);
}

.nfp-btn-cancel:hover { background: rgba(255,255,255,0.06); color: var(--text-primary, #e4e7ec); }

.nfp-btn-create {
    background: var(--accent, #5865f2);
    color: white;
}

.nfp-btn-create:hover {
    background: var(--accent-hover, #4752c4);
    transform: translateY(-1px);
}

/* ===== SIDEBAR NOTE & FOLDER ITEMS — improved styling ===== */
.sidebar-note-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    margin: 1px 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary, #9ca3af);
    transition: transform 0.12s ease-out, background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out, opacity 0.12s ease-out;
    border: 1px solid transparent;
}

.sidebar-note-item:hover {
    background: rgba(128,128,128,0.08);
    color: var(--text-primary, #e4e7ec);
}

.sidebar-note-item.active {
    background: color-mix(in srgb, var(--accent, #5865f2) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, #5865f2) 25%, transparent);
    color: var(--accent-light, #818cf8);
}

.sidebar-note-icon { flex-shrink: 0; opacity: 0.6; }
.sidebar-note-title {
    flex: 1;
    overflow-y: auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-folder-menu {
    opacity: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: var(--text-muted, #6b7280);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease-out, background 0.12s ease-out, border-color 0.12s ease-out, color 0.12s ease-out, opacity 0.12s ease-out;
    flex-shrink: 0;
}

.sidebar-folder-header:hover .sidebar-folder-menu { opacity: 1; }
.sidebar-folder-menu:hover { background: rgba(255,255,255,0.1); color: var(--text-primary, #e4e7ec); }

/* Sidebar toolbar (new folder + new note buttons in tree) */
.sidebar-toolbar {
    display: flex;
    gap: 6px;
    padding: 8px;
}

.sidebar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 7px;
    background: transparent;
    color: var(--text-secondary, #9ca3af);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    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;
}

.sidebar-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary, #e4e7ec); }

.sidebar-btn.sidebar-btn-primary {
    background: color-mix(in srgb, var(--accent, #5865f2) 15%, transparent);
    border-color: color-mix(in srgb, var(--accent, #5865f2) 25%, transparent);
    color: var(--accent-light, #818cf8);
}

.sidebar-btn.sidebar-btn-primary:hover {
    background: color-mix(in srgb, var(--accent, #5865f2) 25%, transparent);
}

.sidebar-search {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    margin: 0 8px 6px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 7px;
}

.sidebar-search-icon { color: var(--text-muted, #6b7280); flex-shrink: 0; display: flex; }

.sidebar-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary, #e4e7ec);
    font-size: 12px;
    font-family: inherit;
}

.sidebar-search-input::placeholder { color: var(--text-muted, #6b7280); }

.sidebar-folders {
    flex: 1;
    overflow-y: auto;
    padding: 0 4px 8px;
}

.sidebar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted, #6b7280);
}

.sidebar-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted, #6b7280);
    font-size: 13px;
}

.sidebar-empty p { margin: 0 0 12px; }

/* Drag over state for folders */
.sidebar-folder-item.drag-over > .sidebar-folder-header {
    background: color-mix(in srgb, var(--accent, #5865f2) 12%, transparent);
    border-radius: 6px;
}

.sidebar-folder-children {
    padding-left: 14px;
    border-left: 1px solid rgba(255,255,255,0.04);
    margin-left: 10px;
}

/* ===== GRAPH VIEW — remove classification button ===== */
.graph-btn-classify { display: none !important; }
.notes-ai-classifier-btn { display: none !important; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .notes-app-sidebar { width: 100%; position: absolute; z-index: 50; }
    .notes-sidebar-resizer { display: none; }
    .notes-document-page { padding: 24px 18px; }
    .note-title-h1 { font-size: 22px; }
    .note-content-area { font-size: 14px; }
}


/* === Delete button on note items (hover) === */
.note-item { position: relative; }
.note-item-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, transform 0.1s;
    z-index: 2;
    padding: 0;
}
.note-item:hover .note-item-delete-btn { opacity: 1; }
.note-item-delete-btn:hover {
    background: rgba(239, 68, 68, 0.25);
    transform: scale(1.1);
}
.note-item-delete-btn svg { width: 14px; height: 14px; }

/* === Delete confirmation dialog === */
.note-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    animation: noteDelFadeIn 0.15s ease-out;
}
@keyframes noteDelFadeIn { from { opacity: 0; } to { opacity: 1; } }
.note-delete-dialog {
    background: var(--bg-card, #1e1e2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 32px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0,0,0,0.5);
    animation: noteDelSlideUp 0.2s ease-out;
}
@keyframes noteDelSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.note-delete-dialog-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(239,68,68,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #ef4444;
}
.note-delete-dialog h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}
.note-delete-dialog p {
    margin: 0 0 24px;
    font-size: 14px;
    color: var(--text-secondary, #9ca3af);
    word-break: break-word;
}
.note-delete-dialog-btns {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.note-delete-cancel {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #e4e7ec);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.note-delete-cancel:hover { background: rgba(255,255,255,0.1); }
.note-delete-confirm {
    flex: 1;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
}
.note-delete-confirm:hover { background: #dc2626; transform: scale(1.02); }

/* Placeholder for contenteditable */
.note-textarea[contenteditable]:empty::before {
    content: attr(data-placeholder);
    color: var(--txt-faint, rgba(255,255,255,0.3));
    pointer-events: none;
}

/* Font picker in toolbar */
.toolbar-font-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgba(255,255,255,0.06);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239ca3af' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-secondary, #9ca3af);
    font-size: 12px;
    padding: 4px 24px 4px 8px;
    cursor: pointer;
    outline: none;
    max-width: 130px;
    height: 30px;
    transition: border-color 0.15s, background-color 0.15s;
    font-family: inherit;
}
.toolbar-font-select:hover {
    border-color: rgba(255,255,255,0.2);
    background-color: rgba(255,255,255,0.1);
}
.toolbar-font-select:focus {
    border-color: var(--accent, #5865f2);
}
.toolbar-font-select option {
    background: var(--bg-card, #1e1e2e);
    color: var(--text-primary, #e4e7ec);
    padding: 6px;
}

/* ═══ FONT PICKER — Premium Dropdown ═══ */
.font-picker-wrap {
    display: inline-flex;
    position: relative;
}
.toolbar-font-trigger {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: var(--text-secondary, #9ca3af);
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    font-family: inherit;
    white-space: nowrap;
    min-width: 70px;
}
.toolbar-font-trigger:hover {
    border-color: rgba(255,255,255,0.25);
    background: rgba(255,255,255,0.1);
    color: var(--text-primary, #e4e7ec);
}
.font-picker-label {
    text-align: center;
    letter-spacing: 0.02em;
}

/* Dropdown panel */
.font-picker-dropdown {
    position: fixed;
    z-index: 99999;
    min-width: 260px;
    max-height: 380px;
    overflow-y: auto;
    background: var(--bg-card, #1a1a2e);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05);
    padding: 6px;
    backdrop-filter: blur(20px);
    animation: fontPickerIn 0.2s ease;
}
@keyframes fontPickerIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.font-picker-header {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255,255,255,0.3);
    padding: 8px 12px 6px;
}
.font-picker-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    gap: 16px;
}
.font-picker-item:hover {
    background: rgba(255,255,255,0.08);
}
.font-picker-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}
.font-picker-preview {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.03em;
}

/* Scrollbar premium */
.font-picker-dropdown::-webkit-scrollbar { width: 4px; }
.font-picker-dropdown::-webkit-scrollbar-track { background: transparent; }
.font-picker-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.font-picker-dropdown::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }


/* ── notes-editor.css ── */
/* ================================================
   NOTES EDITOR - Premium Design
   ProductiveApp v4.0
   ================================================ */

/* === LAYOUT === */
.notes-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 20px;
    height: calc(100vh - 140px);
}

@media (max-width: 900px) {
    .notes-layout {
        grid-template-columns: 1fr;
    }
    .notes-sidebar {
        display: none;
    }
}

/* === SIDEBAR === */
.notes-sidebar {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-sidebar-header {
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-primary);
}

.notes-sidebar-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
}

/* === SEARCH === */
.notes-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.notes-search-icon {
    width: 16px;
    height: 16px;
    color: var(--text-quaternary, #52525b);
    flex-shrink: 0;
}

.notes-search-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.notes-search-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary, #fafafa);
}

.notes-search-input::placeholder {
    color: var(--text-quaternary, #52525b);
}

.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.notes-empty-list {
    padding: 24px;
    text-align: center;
    color: var(--text-quaternary, #52525b);
    font-size: 13px;
}

/* Note item */
.note-item {
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
    margin-bottom: 6px;
}

.note-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.note-item.active {
    background: var(--accent-subtle, color-mix(in srgb, var(--accent) 12%, transparent));
}

.note-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.note-item-preview {
    font-size: 12px;
    color: var(--text-tertiary, #71717a);
    margin: 6px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.note-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-quaternary, #52525b);
}

/* === EDITOR === */
.notes-editor {
    background: var(--bg-secondary, #1a1a2e);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notes-editor-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 12px;
}

.note-title-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #fafafa);
    letter-spacing: -0.4px;
}

.note-title-input::placeholder {
    color: var(--text-quaternary, #52525b);
}

/* === TOOLBAR === */
.notes-toolbar {
    padding: 0 10px;
    border-bottom: none;
    display: inline-flex;
    gap: 2px;
    flex-wrap: nowrap;
    flex-shrink: 0;
    height: 38px;
    align-items: center;
    background: color-mix(in srgb, var(--bg-primary, #0d1117) 60%, transparent);
    scrollbar-width: none;
    border-radius: 10px;
    margin: 6px 0 6px 8px;
}

.notes-toolbar::-webkit-scrollbar {
    display: none;
}

.toolbar-group {
    display: flex;
    gap: 2px;
}

.toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--border-primary);
    margin: 0 4px;
    opacity: 0.5;
}

.toolbar-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: 6px;
    color: var(--text-tertiary, #71717a);
    cursor: pointer;
    transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
}

.toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #fafafa);
}

.toolbar-btn.active {
    background: var(--accent-subtle);
    color: var(--accent);
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

/* === CONTENT === */
.notes-editor-content {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    position: relative; /* Required for AI FAB positioning */
}

.note-textarea {
    width: 100%;
    height: 100%;
    min-height: 400px;
    background: none;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary, #fafafa);
    font-family: 'Inter', -apple-system, sans-serif;
}

.note-textarea::placeholder {
    color: var(--text-quaternary, #52525b);
}

/* === FOOTER === */
.notes-editor-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-quaternary, #52525b);
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
}

.save-indicator.saving { color: var(--accent); }
.save-indicator.saved { color: var(--success, #22c55e); }
.save-indicator.unsaved { color: var(--warning, #f59e0b); }

.word-count {
    font-weight: 500;
}

/* === EMPTY STATE === */
.notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
}

.notes-empty svg {
    width: 56px;
    height: 56px;
    stroke: var(--text-quaternary, #52525b);
    stroke-width: 1;
    fill: none;
    margin-bottom: 20px;
    opacity: 0.5;
}

.notes-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #fafafa);
    margin: 0 0 8px;
}

.notes-empty p {
    font-size: 14px;
    color: var(--text-tertiary, #71717a);
    margin: 0 0 24px;
}

/* === SLASH MENU === */
.slash-menu {
    position: fixed;
    width: 260px;
    background: var(--bg-card, #1a1a1f);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
    overflow: hidden;
}

.slash-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.slash-menu-header {
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.slash-menu-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.slash-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 100ms ease;
}

.slash-menu-item:hover,
.slash-menu-item.selected {
    background: rgba(255, 255, 255, 0.06);
}

.slash-menu-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-secondary);
}

.slash-menu-content {
    flex: 1;
    min-width: 0;
}

.slash-menu-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.slash-menu-desc {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.slash-menu-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-quaternary);
    font-size: 13px;
}

/* === NOTE HEADER ACTIONS === */
.note-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

/* === VISIBILITY TOGGLE === */
.note-visibility-toggle {
    font-size: 16px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 150ms ease-out, background 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out, opacity 150ms ease-out;
}

.note-visibility-toggle.note-private {
    opacity: 0.6;
}

.note-visibility-toggle.note-public {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    opacity: 1;
}

/* === PUBLIC BADGE === */
.note-badge-public {
    margin-right: 4px;
    font-size: 12px;
}

/* === PROJECT FILTER === */
.notes-project-filter {
    width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    background: var(--bg-primary, #0d1117);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    border-radius: 8px;
    color: var(--text-primary, #fafafa);
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.notes-project-filter option {
    background: var(--bg-secondary, #1a1a2e);
    color: var(--text-primary, #fafafa);
}


/* ── notes-components-v6.css ── */
/**
 * NOTES COMPONENTS v6.0 CSS - All UI components
 * ProductiveApp - World Class Edition
 *
 * Includes:
 * - Tags View
 * - Daily Notes
 * - Backlinks Panel
 * - AI Bridge
 * - Wiki Links
 */

/* ========== TAGS VIEW ========== */

.notes-tags-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-tags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
}

.notes-tags-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-tags-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-tree {
    flex: 1;
    overflow-y: auto;
}

.notes-tag-node {
    margin-bottom: 2px;
}

.notes-tag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-tag-item:hover {
    background: rgba(255,255,255,0.05);
}

.notes-tag-chevron {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
}

.notes-tag-spacer {
    width: 12px;
    display: inline-block;
}

.notes-tag-icon {
    font-size: 14px;
    line-height: 1;
}

.notes-tag-name {
    flex: 1;
    font-size: 13px;
    color: var(--text-primary, #e4e7ec);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notes-tag-count {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
}

.notes-tag-children {
    margin-left: 0;
}

.notes-tags-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.notes-tags-empty svg {
    margin-bottom: 12px;
    opacity: 0.3;
}

.notes-tags-empty p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-tags-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

/* ========== DAILY NOTES VIEW ========== */

.notes-daily-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-daily-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.notes-daily-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-daily-today-btn {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--primary-color, var(--accent)) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-daily-today-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

.notes-daily-calendar {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}

.notes-calendar-header {
    text-align: center;
    margin-bottom: 8px;
}

.notes-calendar-month {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.notes-calendar-day-name {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    padding: 4px 0;
    text-transform: uppercase;
}

.notes-calendar-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
    color: var(--text-primary, #e4e7ec);
}

.notes-calendar-cell:not(.empty):hover {
    background: rgba(255,255,255,0.08);
}

.notes-calendar-cell.today {
    background: var(--primary-color, var(--accent));
    color: white;
    font-weight: 600;
}

.notes-calendar-cell.has-note {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    font-weight: 600;
}

.notes-calendar-dot {
    position: absolute;
    bottom: 2px;
    width: 3px;
    height: 3px;
    background: currentColor;
    border-radius: 50%;
}

.notes-daily-list {
    flex: 1;
    overflow-y: auto;
}

.notes-daily-list h5 {
    margin: 0 0 12px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
}

.notes-daily-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-daily-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-daily-item-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color, var(--accent));
    margin-bottom: 4px;
}

.notes-daily-item-preview {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notes-daily-empty {
    padding: 20px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

/* ========== BACKLINKS PANEL ========== */

.notes-backlinks-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes-backlinks-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.notes-backlinks-empty svg {
    margin-bottom: 16px;
    opacity: 0.3;
}

.notes-backlinks-empty p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-backlinks-hint {
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlinks-section {
    margin-bottom: 20px;
}

.notes-backlinks-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.notes-backlinks-section-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
    text-transform: uppercase;
}

.notes-backlinks-count {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlinks-section-empty {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}

.notes-backlinks-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-backlink-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-backlink-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-backlink-item.unlinked {
    border-color: rgba(251, 191, 36, 0.3);
}

.notes-backlink-item-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.notes-backlink-item-header svg {
    flex-shrink: 0;
    color: var(--text-secondary, #9ca3af);
}

.notes-backlink-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
}

.notes-backlink-preview {
    font-size: 11px;
    color: var(--text-secondary, #9ca3af);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== AI BRIDGE ========== */

.notes-ai-sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.notes-ai-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.notes-ai-sidebar-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-refresh-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-refresh-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary, #e4e7ec);
    transform: rotate(90deg);
}

.notes-ai-clusters-list {
    flex: 1;
    overflow-y: auto;
}

.notes-ai-cluster-item {
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-cluster-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-ai-cluster-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.notes-ai-cluster-icon {
    font-size: 16px;
}

.notes-ai-cluster-name {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-cluster-count {
    padding: 2px 6px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary-color, var(--accent));
}

.notes-ai-cluster-keywords {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.notes-ai-cluster-keywords .keyword {
    padding: 2px 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    font-size: 10px;
    color: var(--text-secondary, #9ca3af);
}

.notes-ai-empty,
.notes-ai-panel-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.notes-ai-empty svg,
.notes-ai-panel-empty svg {
    margin-bottom: 12px;
    opacity: 0.3;
}

.notes-ai-empty p,
.notes-ai-panel-empty p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-generate-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--primary-color, var(--accent)) 0%, var(--accent-light) 100%);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* AI Panel */
.notes-ai-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.notes-ai-section {
    padding: 12px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
}

.notes-ai-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.notes-ai-section-header h5 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-section-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-section-btn:hover {
    background: rgba(255,255,255,0.08);
    transform: scale(1.1);
}

.notes-ai-placeholder,
.notes-ai-loading,
.notes-ai-error {
    padding: 12px;
    text-align: center;
    font-size: 12px;
    border-radius: 6px;
}

.notes-ai-placeholder {
    color: var(--text-secondary, #9ca3af);
    font-style: italic;
}

.notes-ai-loading {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--primary-color, var(--accent));
}

.notes-ai-error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.notes-ai-tags-container,
.notes-ai-summary-container,
.notes-ai-similar-container {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary, #e4e7ec);
}

.notes-ai-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notes-ai-tag-suggestion {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border: 1px solid var(--primary-color, var(--accent));
    border-radius: 4px;
    color: var(--primary-color, var(--accent));
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-tag-suggestion:hover {
    background: color-mix(in srgb, var(--accent) 25%, transparent);
    transform: translateY(-1px);
}

.notes-ai-summary-container p {
    margin: 0;
}

.notes-ai-similar-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notes-ai-similar-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 6px;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.notes-ai-similar-item:hover {
    background: rgba(255,255,255,0.06);
    border-color: var(--primary-color, var(--accent));
}

.notes-ai-similar-item svg {
    flex-shrink: 0;
    color: var(--text-secondary, #9ca3af);
}

.notes-ai-similar-item span {
    font-size: 12px;
    color: var(--text-primary, #e4e7ec);
}

/* ========== WIKI LINKS ========== */

.wiki-link {
    color: var(--primary-color, var(--accent));
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dashed var(--primary-color, var(--accent));
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.wiki-link:hover {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-bottom-style: solid;
}

.wiki-link.missing {
    color: #f59e0b;
    border-bottom-color: #f59e0b;
}

.wiki-link.missing:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* ========== SCROLLBARS ========== */

.notes-tags-tree::-webkit-scrollbar,
.notes-daily-list::-webkit-scrollbar,
.notes-ai-clusters-list::-webkit-scrollbar {
    width: 6px;
}

.notes-tags-tree::-webkit-scrollbar-track,
.notes-daily-list::-webkit-scrollbar-track,
.notes-ai-clusters-list::-webkit-scrollbar-track {
    background: transparent;
}

.notes-tags-tree::-webkit-scrollbar-thumb,
.notes-daily-list::-webkit-scrollbar-thumb,
.notes-ai-clusters-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
}

.notes-tags-tree::-webkit-scrollbar-thumb:hover,
.notes-daily-list::-webkit-scrollbar-thumb:hover,
.notes-ai-clusters-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.15);
}


/* ── notes-graph.css ── */
/**
 * NOTES GRAPH VIEW - Premium glassmorphism styling
 * ProductiveApp v5.0
 */

/* === MODAL OVERLAY === */
.notes-graph-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 18, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* === MODAL CONTAINER === */
.notes-graph-modal {
    width: 95vw;
    height: 90vh;
    max-width: 1800px;
    max-height: 1000px;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.95), rgba(30, 30, 50, 0.95));
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* === HEADER === */
.notes-graph-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.notes-graph-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
}

.notes-graph-title svg {
    color: #667eea;
}

.notes-graph-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
    color: #aaa;
}

.notes-graph-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: scale(1.05);
}

/* === TOOLBAR === */
.notes-graph-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    flex-wrap: wrap;
}

.graph-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #ddd;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.25s ease-out, border-color 0.25s ease-out, opacity 0.25s ease-out;
    white-space: nowrap;
}

.graph-btn svg {
    flex-shrink: 0;
}

.graph-btn:hover {
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

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

.graph-btn-active {
    background: rgba(102, 126, 234, 0.2) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
    color: #a5b4fc !important;
}

.graph-toolbar-divider {
    width: 1px;
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 4px;
}

/* === CONTAINER === */
.notes-graph-container {
    position: relative;
    flex: 1;
    background: #0a0a12;
    overflow: hidden;
}

#notes-graph-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}

#notes-graph-canvas:active {
    cursor: grabbing;
}

/* === TOOLTIP === */
.graph-tooltip {
    position: absolute;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.98), rgba(30, 30, 50, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    max-width: 280px;
    pointer-events: none;
    z-index: 1150;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6),
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tooltipFadeIn 0.2s ease;
    transform: translate(-50%, -120%);
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -110%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -120%);
    }
}

/* === LOADING === */
.graph-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 18, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 100;
}

.graph-loading-spinner {
    width: 50px;
    height: 50px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.graph-loading-text {
    margin-top: 16px;
    color: #aaa;
    font-size: 14px;
}

/* === STATS === */
.graph-stats {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(20, 20, 40, 0.85), rgba(30, 30, 50, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.graph-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 60px;
}

.graph-stat-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.graph-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
}

/* === CATEGORY BADGES (for tooltips) === */
.category-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.category-badge.technical {
    background: linear-gradient(135deg, #4488ff, #2266ff);
}

.category-badge.creative {
    background: linear-gradient(135deg, #aa44ff, #8822ff);
}

.category-badge.planning {
    background: linear-gradient(135deg, #ff8800, #ff6600);
}

.category-badge.research {
    background: linear-gradient(135deg, #22cc66, #11aa44);
}

.category-badge.personal {
    background: linear-gradient(135deg, #ff66aa, #ff4488);
}

.category-badge.reference {
    background: linear-gradient(135deg, #cccc44, #aaaa22);
}

.category-badge.meeting {
    background: linear-gradient(135deg, #44ccff, #22aaff);
}

.category-badge.idea {
    background: linear-gradient(135deg, #ff44ff, #ff22ff);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .notes-graph-modal {
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
    }

    .notes-graph-header {
        padding: 16px 20px;
    }

    .notes-graph-title {
        font-size: 18px;
    }

    .notes-graph-toolbar {
        padding: 10px 20px;
        gap: 6px;
    }

    .graph-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .graph-btn span {
        display: none; /* Hide text labels on mobile, show only icons */
    }

    .graph-stats {
        bottom: 10px;
        left: 10px;
        padding: 8px 12px;
        gap: 8px;
    }

    .graph-stat {
        min-width: 50px;
    }

    .graph-stat-value {
        font-size: 16px;
    }

    .graph-tooltip {
        max-width: 200px;
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* === DARK MODE COMPATIBILITY === */
[data-theme="light"] .notes-graph-modal-overlay {
    background: rgba(240, 240, 245, 0.9);
}

[data-theme="light"] .notes-graph-modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.98));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .notes-graph-header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.01));
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .notes-graph-title {
    color: #1a1a2e;
}

[data-theme="light"] .notes-graph-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #666;
}

[data-theme="light"] .notes-graph-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #000;
}

[data-theme="light"] .notes-graph-toolbar {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .graph-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: #444;
}

[data-theme="light"] .graph-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
    color: #667eea;
}

[data-theme="light"] .notes-graph-container {
    background: #f8f9fa;
}

[data-theme="light"] .graph-tooltip {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 250, 255, 0.98));
    border-color: rgba(0, 0, 0, 0.15);
    color: #1a1a2e;
}

[data-theme="light"] .graph-stats {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(250, 250, 255, 0.95));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .graph-stat-label {
    color: #666;
}

/* === ANIMATIONS === */
@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.graph-btn, .graph-stat {
    animation: scaleIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) backwards;
}

.graph-btn:nth-child(1) { animation-delay: 0.05s; }
.graph-btn:nth-child(2) { animation-delay: 0.1s; }
.graph-btn:nth-child(3) { animation-delay: 0.15s; }
.graph-btn:nth-child(4) { animation-delay: 0.2s; }
.graph-btn:nth-child(5) { animation-delay: 0.25s; }
.graph-btn:nth-child(6) { animation-delay: 0.3s; }
.graph-btn:nth-child(7) { animation-delay: 0.35s; }

.graph-stat:nth-child(1) { animation-delay: 0.4s; }
.graph-stat:nth-child(2) { animation-delay: 0.45s; }
.graph-stat:nth-child(3) { animation-delay: 0.5s; }

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
    .notes-graph-modal-overlay,
    .notes-graph-modal,
    .graph-tooltip,
    .graph-btn,
    .graph-stat {
        animation: none;
    }

    .graph-btn:hover {
        transform: none;
    }

    .graph-loading-spinner {
        animation: none;
        border-top-color: transparent;
    }
}

/* === FOCUS STATES === */
.graph-btn:focus-visible,
.notes-graph-close:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ── AI buttons in graph toolbar (ultra premium) ── */
.graph-btn-ai {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 15%, transparent), rgba(6,182,212,0.1)) !important;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent) !important;
    color: var(--accent-light) !important;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}
.graph-btn-ai::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 10%, transparent), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
}
.graph-btn-ai:hover::before { transform: translateX(100%); }
.graph-btn-ai:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, transparent), rgba(6,182,212,0.2)) !important;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--accent) 30%, transparent) !important;
    transform: translateY(-2px);
}

/* === PREVIEW PANEL v7.1 (Premium) === */

#graph-note-preview {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 360px;
    background: linear-gradient(160deg, rgba(10, 14, 26, 0.98) 0%, rgba(15, 20, 40, 0.98) 100%);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-left: 1px solid rgba(163, 113, 247, 0.15);
    display: flex; flex-direction: column;
    z-index: 100;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
}
#graph-note-preview.visible { transform: translateX(0); }

.gnp-header {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(163, 113, 247, 0.04) 0%, transparent 100%);
}

.gnp-header-top {
    display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px;
}

.gnp-title {
    flex: 1; font-size: 17px; font-weight: 700; color: #e6edf3;
    line-height: 1.4; word-break: break-word;
}

.gnp-close {
    background: none; border: none; color: #4b5563;
    cursor: pointer; font-size: 16px; padding: 4px 6px; line-height: 1;
    flex-shrink: 0; 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;
    border-radius: 6px;
}
.gnp-close:hover { color: #e6edf3; background: rgba(255,255,255,0.08); }

.gnp-meta {
    display: flex; align-items: center; gap: 8px;
}

.gnp-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; text-transform: uppercase;
    letter-spacing: 0.06em;
}

.gnp-meta-info {
    font-size: 11px; color: #4b5563;
}

.gnp-body {
    flex: 1; overflow-y: auto; padding: 16px;
    font-size: 14px;
}

.gnp-preview-text {
    color: #9ca3af; line-height: 1.75;
    border-left: 2px solid rgba(163, 113, 247, 0.25);
    padding-left: 14px;
    margin-bottom: 16px;
}

.gnp-empty {
    color: #374151; font-size: 13px; font-style: italic;
}

.gnp-tags {
    display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px;
}

.gnp-tag {
    padding: 3px 10px; border-radius: 6px;
    background: rgba(163, 113, 247, 0.08); color: #a371f7;
    border: 1px solid rgba(163, 113, 247, 0.15);
    font-size: 12px;
}

.gnp-section { margin-bottom: 16px; }

.gnp-section-title {
    font-size: 10px; font-weight: 700; color: #4b5563;
    text-transform: uppercase; letter-spacing: 0.1em;
    margin-bottom: 8px;
}

.gnp-conn-item {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px; border-radius: 8px; margin-bottom: 3px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    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;
}
.gnp-conn-item:hover {
    background: rgba(163, 113, 247, 0.06);
    border-color: rgba(163, 113, 247, 0.15);
}

.gnp-conn-dot { font-size: 8px; flex-shrink: 0; }
.gnp-conn-name { flex: 1; font-size: 13px; color: #9ca3af; }
.gnp-conn-pct { font-size: 10px; color: #374151; }

/* Footer buttons */
.gnp-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex; flex-direction: column; gap: 8px;
}

.gnp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    font-weight: 600; font-size: 13px;
    cursor: pointer; transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
    border: none;
    width: 100%;
}

.gnp-btn svg { flex-shrink: 0; }

.gnp-btn-edit {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(163, 113, 247, 0.2);
    color: #c4b5fd;
}
.gnp-btn-edit:hover {
    background: rgba(163, 113, 247, 0.12);
    border-color: rgba(163, 113, 247, 0.4);
    color: #e9d5ff;
    transform: translateY(-1px);
}

.gnp-btn-open {
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.15), rgba(88, 166, 255, 0.15));
    border: 1px solid rgba(163, 113, 247, 0.25);
    color: #c4b5fd;
}
.gnp-btn-open:hover {
    background: linear-gradient(135deg, rgba(163, 113, 247, 0.25), rgba(88, 166, 255, 0.25));
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(163, 113, 247, 0.25);
}

/* Edit mode */
.gnp-edit-input {
    width: 100%; padding: 8px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(163, 113, 247, 0.3);
    border-radius: 8px; color: #e6edf3;
    font-size: 16px; font-weight: 700;
    font-family: Inter, sans-serif; outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.gnp-edit-input:focus {
    border-color: #a371f7;
    box-shadow: 0 0 0 3px rgba(163, 113, 247, 0.12);
}

.gnp-edit-textarea {
    width: 100%; min-height: 220px; padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(163, 113, 247, 0.2);
    border-radius: 10px; color: #b0b8c8;
    font-size: 14px; font-family: Inter, sans-serif;
    line-height: 1.7; outline: none; resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.gnp-edit-textarea:focus {
    border-color: #a371f7;
    box-shadow: 0 0 0 3px rgba(163, 113, 247, 0.08);
    color: #e6edf3;
}

.gnp-edit-actions {
    display: flex; gap: 8px; margin-top: 12px;
}

.gnp-btn-save {
    flex: 1;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.gnp-btn-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.35);
}

.gnp-btn-cancel {
    flex: 1;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #6b7280;
}
.gnp-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e6edf3;
}

/* Light theme */
[data-theme="light"] #graph-note-preview {
    background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(250,250,255,0.98));
    border-left-color: rgba(163, 113, 247, 0.2);
}
[data-theme="light"] .gnp-title { color: #1a1a2e; }
[data-theme="light"] .gnp-preview-text { color: #4b5563; }
[data-theme="light"] .gnp-edit-input { background: rgba(0,0,0,0.04); color: #1a1a2e; }
[data-theme="light"] .gnp-edit-textarea { background: rgba(0,0,0,0.02); color: #374151; }
[data-theme="light"] .gnp-btn-edit { background: rgba(163,113,247,0.06); color: #7c3aed; }
[data-theme="light"] .gnp-btn-open { background: rgba(163,113,247,0.08); color: #7c3aed; }

/* Mobile */
@media (max-width: 768px) {
    #graph-note-preview { width: 100%; }
}


/* ── notes-ai.css ── */
/**
 * NOTES AI - Styles for AI-powered note enhancement
 * ProductiveApp v4.2
 */

/* ========== AI FAB (Floating Action Button) ========== */
.notes-ai-fab {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 12px;
}

.ai-fab-main {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary, var(--accent-light)));
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 4px 20px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)),
        0 2px 0 rgba(255, 255, 255, 0.15) inset;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.ai-fab-main::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ai-fab-main:hover {
    transform: scale(1.08);
    box-shadow:
        0 8px 30px var(--accent-glow, color-mix(in srgb, var(--accent) 50%, transparent)),
        0 2px 0 rgba(255, 255, 255, 0.2) inset;
}

.ai-fab-main:hover::before {
    opacity: 1;
}

.ai-fab-main svg {
    width: 26px;
    height: 26px;
}

.ai-fab-main.processing {
    pointer-events: none;
}

.ai-fab-main.processing svg {
    animation: ai-spin 1s linear infinite;
}

@keyframes ai-spin {
    to { transform: rotate(360deg); }
}

/* FAB Menu */
.ai-fab-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s ease-out, border-color 0.3s ease-out, opacity 0.3s ease-out;
}

.notes-ai-fab.expanded .ai-fab-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.notes-ai-fab.expanded .ai-fab-main {
    transform: rotate(45deg);
    background: var(--danger, #ef4444);
}

.ai-fab-action {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--bg-card, rgba(30, 30, 45, 0.95));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 12px;
    color: var(--text-primary, #fff);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    box-shadow:
        0 4px 15px rgba(0, 0, 0, 0.3),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
    backdrop-filter: blur(10px);
}

.ai-fab-action:hover {
    background: var(--accent);
    border-color: var(--accent);
    transform: translateX(-5px);
    box-shadow:
        0 6px 20px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent)),
        0 1px 0 rgba(255, 255, 255, 0.1) inset;
}

.ai-fab-action svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ai-fab-action span {
    flex: 1;
}

/* ========== AI Preview Modal ========== */
.notes-ai-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease-out, background 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out, opacity 0.3s ease-out;
}

.notes-ai-preview-modal.active {
    opacity: 1;
    visibility: visible;
}

.ai-preview-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.ai-preview-content {
    position: relative;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    background: var(--bg-card, rgba(25, 25, 35, 0.98));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.5),
        0 2px 0 rgba(255, 255, 255, 0.05) inset,
        0 0 60px var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent));
    transform: scale(0.9) translateY(30px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.notes-ai-preview-modal.active .ai-preview-content {
    transform: scale(1) translateY(0);
}

.ai-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: linear-gradient(180deg, rgba(255,255,255,0.03) 0%, transparent 100%);
}

.ai-preview-header h3 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.ai-preview-header h3 svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
}

.ai-preview-close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    color: var(--text-muted, #888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease-out, background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, opacity 0.2s ease-out;
}

.ai-preview-close:hover {
    background: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
    color: white;
}

.ai-preview-close svg {
    width: 18px;
    height: 18px;
}

.ai-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-preview-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ai-preview-section label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #888);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-preview-text {
    padding: 16px 20px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.3));
    border: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary, rgba(255, 255, 255, 0.8));
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

.ai-preview-text.original {
    opacity: 0.7;
    border-left: 3px solid var(--text-muted, #888);
}

.ai-preview-text.result {
    border-left: 3px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-glow, color-mix(in srgb, var(--accent) 10%, transparent)) 0%, transparent 100%);
}

.ai-preview-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.1));
    background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.2) 100%);
}

.ai-preview-footer .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
}

/* ========== Toolbar AI Button ========== */
.toolbar-btn-ai {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary, var(--accent-light))) !important;
    color: white !important;
    border: none !important;
}

.toolbar-btn-ai:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px var(--accent-glow, color-mix(in srgb, var(--accent) 40%, transparent));
}

.toolbar-ai-group {
    margin-left: auto;
}

/* ========== AI Spinner ========== */
.ai-spinner {
    animation: ai-spin 1s linear infinite;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
    .notes-ai-fab {
        bottom: 16px;
        right: 16px;
    }

    .ai-fab-main {
        width: 50px;
        height: 50px;
    }

    .ai-fab-action {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .ai-preview-content {
        max-height: 95vh;
        border-radius: 16px;
    }

    .ai-preview-body {
        padding: 16px;
    }

    .ai-preview-text {
        max-height: 150px;
    }
}

/* ========== Theme Specific ========== */
[data-theme="matrix"] .ai-fab-main,
[data-theme="hacker"] .ai-fab-main {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

[data-theme="cyberpunk"] .ai-fab-main {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

[data-theme="ocean"] .ai-fab-main {
    background: linear-gradient(135deg, #06b6d4, #0891b2);
}

[data-theme="sunset"] .ai-fab-main {
    background: linear-gradient(135deg, #f97316, #ea580c);
}

[data-theme="forest"] .ai-fab-main {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}