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


/* ── 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;
}


/* ── 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 {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.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;
  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-text-3);
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 4px;
  transition: color .15s;
}
.gcal-more:hover { color: var(--gcal-accent); }

/* ══════════════════════════════════════════════════
   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;
}


/* ── 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: 1rem;
  flex-wrap: wrap;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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


/* ── 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: hidden;
    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: hidden;
    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: hidden;
    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: hidden;
    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: hidden;
}

/* ===== 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: hidden;
}

/* 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);
    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: hidden;
    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 {
    position: relative;
}

.note-content-area {
    width: 100%;
    min-height: 500px;
    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: hidden;
    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: hidden;
}

.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: hidden;
    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: hidden;
    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: hidden;
}

.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: hidden;
    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; }
}


/* ── 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 16px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex-shrink: 0;
    height: 54px;
    align-items: center;
    background: color-mix(in srgb, var(--bg-primary, #0d1117) 80%, transparent);
    scrollbar-width: none;
}

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

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

.toolbar-divider {
    width: 1px;
    height: 28px;
    background: var(--border-primary);
    margin: 0 8px;
}

.toolbar-btn {
    width: 34px;
    height: 34px;
    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);
}