/* ==========================================================
   MYLIB - FEUILLE DE STYLE RESPONSIVE & MULTI-DEVICES
   Auteur : ArchiSys3.0 & AImi
   ========================================================== */

:root {
  --font-size-reading: 14px;
  --ui-item-padding: 0.625rem 0.875rem;
  --ui-item-gap: 0.375rem;
  --ui-font-base: 0.875rem;
}

/* ----------------------------------------------------------
   MOTEUR DE DENSITÉ GLOBALE UI/UX (COMPACT / NORMAL / CONFORTABLE)
   Couvre l'intégralité de l'interface : header, sidebars, listes, 
   barres d'outils, formulaires, modales, boutons et badges.
   ---------------------------------------------------------- */

/* ==========================================================
   1. MODE COMPACT : Gain d'espace vertical & horizontal (~35%)
   ========================================================== */
/* Header & Navigation Principale */
html[data-density="compact"] header {
  height: 2.75rem !important;
  min-height: 2.75rem !important;
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}
html[data-density="compact"] header a div:first-child,
html[data-density="compact"] header a img {
  width: 1.5rem !important;
  height: 1.5rem !important;
}
html[data-density="compact"] header a span:first-child {
  font-size: 0.8125rem !important;
}
html[data-density="compact"] header button {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.6875rem !important;
  min-height: 1.75rem !important;
}
html[data-density="compact"] header button svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

/* Sidebar Gauche & Tiroirs Mobiles */
html[data-density="compact"] #sidebarNav,
html[data-density="compact"] #sidebarDrawer {
  padding: 0.35rem 0.5rem !important;
}
html[data-density="compact"] #sidebarNav nav {
  padding: 0.25rem !important;
}
html[data-density="compact"] #sidebarNav button,
html[data-density="compact"] #sidebarDrawer button {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  font-size: 0.75rem !important;
  min-height: 1.6rem !important;
  line-height: 1.15rem !important;
}
html[data-density="compact"] #sidebarNav button svg,
html[data-density="compact"] #sidebarDrawer button svg {
  width: 0.8125rem !important;
  height: 0.8125rem !important;
}
html[data-density="compact"] #sidebarNav .uppercase,
html[data-density="compact"] #sidebarDrawer .uppercase {
  font-size: 0.625rem !important;
  margin-bottom: 0.15rem !important;
  padding-left: 0.35rem !important;
}
html[data-density="compact"] #tagsNavList button,
html[data-density="compact"] #tagsNavList span {
  padding: 0.1rem 0.35rem !important;
  font-size: 0.625rem !important;
}
html[data-density="compact"] .sidebar-accordion-header {
  padding: 3px 6px !important;
  font-size: 10px !important;
}
html[data-density="compact"] .tree-row,
html[data-density="compact"] .tree-node-row {
  min-height: 22px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
html[data-density="compact"] .tree-guides-wrapper {
  height: 22px !important;
}
html[data-density="compact"] .tree-guide-col {
  width: 14px !important;
}
html[data-density="compact"] .tree-node-label {
  font-size: 11px !important;
}
html[data-density="compact"] .tree-badge-count {
  font-size: 9px !important;
  padding: 0 4px !important;
}
html[data-density="compact"] #sidebarNavCollapsedRail {
  width: 2.25rem !important;
  padding-top: 0.5rem !important;
}
html[data-density="compact"] #sidebarNavCollapsedRail button {
  padding: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Volet Central : Filtres & Liste de Prompts */
html[data-density="compact"] #promptListSection .p-3 {
  padding: 0.35rem 0.5rem !important;
}
html[data-density="compact"] #searchInput {
  padding-top: 0.2rem !important;
  padding-bottom: 0.2rem !important;
  padding-left: 1.75rem !important;
  padding-right: 0.5rem !important;
  height: 1.75rem !important;
  font-size: 0.75rem !important;
}
html[data-density="compact"] #sortSelect {
  padding: 0.15rem 0.35rem !important;
  height: 1.5rem !important;
  font-size: 0.6875rem !important;
}
html[data-density="compact"] #filteredCount {
  font-size: 0.6875rem !important;
}
html[data-density="compact"] .clickup-doc-card,
html[data-density="compact"] #promptItemsList > div {
  padding: 0.25rem 0.45rem !important;
  margin-bottom: 0.15rem !important;
  border-radius: 0.375rem !important;
}
html[data-density="compact"] .clickup-doc-card .prompt-item-title,
html[data-density="compact"] #promptItemsList > div h4 {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  margin-bottom: 0 !important;
}
html[data-density="compact"] .clickup-doc-card .prompt-item-desc {
  display: none !important;
}
html[data-density="compact"] .clickup-doc-card .clickup-status-pill {
  font-size: 8px !important;
  padding: 0 4px !important;
}
html[data-density="compact"] .clickup-card-footer {
  padding-top: 0.15rem !important;
  margin-top: 0.15rem !important;
  font-size: 8.5px !important;
}
html[data-density="compact"] .card-meta-tag {
  font-size: 8px !important;
  padding: 0 3px !important;
}
html[data-density="compact"] #promptItemsList > div > div {
  margin-bottom: 0.05rem !important;
}
html[data-density="compact"] #promptItemsList > div span {
  font-size: 0.65rem !important;
}

/* Dashboard Dossier en Mode Compact */
html[data-density="compact"] .folder-dashboard-body {
  padding: 0.75rem 1rem !important;
  gap: 1rem !important;
}
html[data-density="compact"] .folder-hero-card {
  padding: 0.75rem 1rem !important;
  border-radius: 0.75rem !important;
}
html[data-density="compact"] .folder-hero-card .w-12 {
  width: 2.25rem !important;
  height: 2.25rem !important;
  font-size: 1.25rem !important;
}
html[data-density="compact"] .folder-hero-card h2 {
  font-size: 1.1rem !important;
  line-height: 1.3rem !important;
}
html[data-density="compact"] .folder-child-card {
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
}

/* Panneau de Détail & Barre d'Actions Supérieure */
html[data-density="compact"] #detailView header,
html[data-density="compact"] #mainContent header {
  padding: 0.4rem 0.75rem !important;
}
html[data-density="compact"] #detailView h2,
html[data-density="compact"] #mainContent h2 {
  font-size: 1rem !important;
  line-height: 1.3rem !important;
}
html[data-density="compact"] #detailView button,
html[data-density="compact"] #mainContent header button {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.6875rem !important;
  min-height: 1.6rem !important;
}
html[data-density="compact"] #detailView button svg,
html[data-density="compact"] #mainContent header button svg {
  width: 0.8125rem !important;
  height: 0.8125rem !important;
}
html[data-density="compact"] .badge,
html[data-density="compact"] #detailView span.rounded {
  padding: 0.1rem 0.35rem !important;
  font-size: 0.65rem !important;
}

/* Panneau d'Édition : Formulaire & Barre d'Outils Markdown */
html[data-density="compact"] #editorView .p-4 {
  padding: 0.5rem 0.75rem !important;
}
html[data-density="compact"] #editorView label {
  font-size: 0.65rem !important;
  margin-bottom: 0.15rem !important;
}
html[data-density="compact"] #editorView input,
html[data-density="compact"] #editorView select {
  padding: 0.25rem 0.5rem !important;
  height: 1.75rem !important;
  font-size: 0.75rem !important;
}
html[data-density="compact"] #editorView .border-b button {
  padding: 0.2rem 0.4rem !important;
  font-size: 0.6875rem !important;
}
html[data-density="compact"] #editContent {
  padding: 0.5rem 0.75rem !important;
  font-size: 0.8125rem !important;
}

/* Modales d'Application (Settings, Catégories, Variables, etc.) */
html[data-density="compact"] .fixed.inset-0 .p-5 {
  padding: 0.65rem 0.85rem !important;
}
html[data-density="compact"] .fixed.inset-0 .px-5.py-4 {
  padding: 0.4rem 0.75rem !important;
}
html[data-density="compact"] .fixed.inset-0 button {
  padding: 0.3rem 0.55rem !important;
  font-size: 0.75rem !important;
}

/* Bottom Navigation Mobile */
html[data-density="compact"] #mobileBottomNav {
  height: 3rem !important;
}
html[data-density="compact"] #mobileBottomNav button {
  min-height: 36px !important;
  font-size: 0.65rem !important;
}

/* ==========================================================
   DENSITÉ MINI-COMPACT (Ultra-Condensée, Listes & Arbres Massifs)
   ========================================================== */
html[data-density="mini-compact"] #sidebarNav,
html[data-density="mini-compact"] #sidebarDrawer {
  padding: 0.2rem 0.35rem !important;
}
html[data-density="mini-compact"] #sidebarNav nav {
  padding: 0.15rem !important;
}
html[data-density="mini-compact"] #sidebarNav button,
html[data-density="mini-compact"] #sidebarDrawer button {
  padding: 0.1rem 0.35rem !important;
  font-size: 0.7rem !important;
  min-height: 1.35rem !important;
  line-height: 1.1rem !important;
}
html[data-density="mini-compact"] #sidebarNav button svg,
html[data-density="mini-compact"] #sidebarDrawer button svg {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
html[data-density="mini-compact"] #sidebarNav .uppercase,
html[data-density="mini-compact"] #sidebarDrawer .uppercase {
  font-size: 0.55rem !important;
  margin-bottom: 0.1rem !important;
  padding-left: 0.25rem !important;
}
html[data-density="mini-compact"] #tagsNavList button,
html[data-density="mini-compact"] #tagsNavList span {
  padding: 0.05rem 0.25rem !important;
  font-size: 0.58rem !important;
}
html[data-density="mini-compact"] .sidebar-accordion-header {
  padding: 2px 4px !important;
  font-size: 9.5px !important;
}
html[data-density="mini-compact"] .tree-row,
html[data-density="mini-compact"] .tree-node-row {
  min-height: 18px !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
html[data-density="mini-compact"] .tree-guides-wrapper {
  height: 18px !important;
}
html[data-density="mini-compact"] .tree-guide-col {
  width: 12px !important;
}
html[data-density="mini-compact"] .tree-node-label {
  font-size: 10px !important;
}
html[data-density="mini-compact"] .tree-badge-count {
  font-size: 8px !important;
  padding: 0 3px !important;
}
html[data-density="mini-compact"] #promptListSection .p-3 {
  padding: 0.25rem 0.35rem !important;
}
html[data-density="mini-compact"] #searchInput {
  padding: 0.15rem 0.35rem 0.15rem 1.5rem !important;
  height: 1.5rem !important;
  font-size: 0.7rem !important;
}
html[data-density="mini-compact"] #sortSelect {
  padding: 0.1rem 0.25rem !important;
  height: 1.35rem !important;
  font-size: 0.65rem !important;
}
html[data-density="mini-compact"] #filteredCount {
  font-size: 0.65rem !important;
}
html[data-density="mini-compact"] .clickup-doc-card,
html[data-density="mini-compact"] #promptItemsList > div {
  padding: 0.15rem 0.35rem !important;
  margin-bottom: 0.1rem !important;
  border-radius: 0.25rem !important;
}
html[data-density="mini-compact"] .clickup-doc-card .prompt-item-title,
html[data-density="mini-compact"] #promptItemsList > div h4 {
  font-size: 0.7rem !important;
  line-height: 0.95rem !important;
  margin-bottom: 0 !important;
}
html[data-density="mini-compact"] .clickup-doc-card .prompt-item-desc {
  display: none !important;
}
html[data-density="mini-compact"] .clickup-doc-card .clickup-status-pill {
  font-size: 7.5px !important;
  padding: 0 3px !important;
}
html[data-density="mini-compact"] .clickup-card-footer {
  padding-top: 0.08rem !important;
  margin-top: 0.08rem !important;
  font-size: 7.5px !important;
}
html[data-density="mini-compact"] .card-meta-tag {
  font-size: 7.5px !important;
  padding: 0 2.5px !important;
}
html[data-density="mini-compact"] .folder-dashboard-body {
  padding: 0.5rem 0.75rem !important;
  gap: 0.75rem !important;
}
html[data-density="mini-compact"] .folder-hero-card {
  padding: 0.5rem 0.75rem !important;
  border-radius: 0.5rem !important;
}
html[data-density="mini-compact"] .folder-hero-card .w-12 {
  width: 1.85rem !important;
  height: 1.85rem !important;
  font-size: 1rem !important;
}
html[data-density="mini-compact"] .folder-hero-card h2 {
  font-size: 0.95rem !important;
  line-height: 1.15rem !important;
}
html[data-density="mini-compact"] .folder-child-card {
  padding: 0.35rem 0.5rem !important;
  border-radius: 0.375rem !important;
}
html[data-density="mini-compact"] #detailView header,
html[data-density="mini-compact"] #mainContent header {
  padding: 0.3rem 0.5rem !important;
}
html[data-density="mini-compact"] #detailView h2,
html[data-density="mini-compact"] #mainContent h2 {
  font-size: 0.9rem !important;
  line-height: 1.15rem !important;
}
html[data-density="mini-compact"] #detailView button,
html[data-density="mini-compact"] #mainContent header button {
  padding: 0.15rem 0.4rem !important;
  font-size: 0.65rem !important;
  min-height: 1.4rem !important;
}
html[data-density="mini-compact"] .badge,
html[data-density="mini-compact"] #detailView span.rounded {
  padding: 0.05rem 0.25rem !important;
  font-size: 0.6rem !important;
}
html[data-density="mini-compact"] #editorView .p-4 {
  padding: 0.35rem 0.5rem !important;
}
html[data-density="mini-compact"] #editorView input,
html[data-density="mini-compact"] #editorView select {
  padding: 0.15rem 0.35rem !important;
  height: 1.5rem !important;
  font-size: 0.7rem !important;
}
html[data-density="mini-compact"] #editContent {
  padding: 0.35rem 0.5rem !important;
  font-size: 0.75rem !important;
}

html[data-density="compact"] #mobileBottomNav svg {
  width: 1.1rem !important;
  height: 1.1rem !important;
}

/* ==========================================================
   2. MODE CONFORTABLE : Espacements étendus (+25%) pour tactile
   ========================================================== */
html[data-density="comfortable"] header {
  height: 4rem !important;
  min-height: 4rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
html[data-density="comfortable"] header button {
  padding: 0.55rem 1rem !important;
  font-size: 0.8125rem !important;
  min-height: 2.5rem !important;
}
html[data-density="comfortable"] #sidebarNav button,
html[data-density="comfortable"] #sidebarDrawer button {
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
  padding-left: 0.875rem !important;
  padding-right: 0.875rem !important;
  font-size: 0.875rem !important;
  min-height: 2.75rem !important;
}
html[data-density="comfortable"] .sidebar-accordion-header {
  padding: 8px 12px !important;
  font-size: 12px !important;
}
html[data-density="comfortable"] .tree-row,
html[data-density="comfortable"] .tree-node-row {
  min-height: 32px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}
html[data-density="comfortable"] .tree-guides-wrapper {
  height: 32px !important;
}
html[data-density="comfortable"] .clickup-doc-card,
html[data-density="comfortable"] #promptItemsList > div {
  padding: 0.85rem 1rem !important;
  margin-bottom: 0.5rem !important;
  border-radius: 0.875rem !important;
}
html[data-density="comfortable"] .clickup-doc-card .prompt-item-title {
  font-size: 0.875rem !important;
}
html[data-density="comfortable"] .clickup-card-footer {
  padding-top: 0.5rem !important;
  margin-top: 0.5rem !important;
  font-size: 11px !important;
}
html[data-density="comfortable"] #searchInput {
  padding-top: 0.55rem !important;
  padding-bottom: 0.55rem !important;
  height: 2.75rem !important;
  font-size: 0.875rem !important;
}
html[data-density="comfortable"] #sortSelect {
  height: 2.25rem !important;
  padding: 0.35rem 0.75rem !important;
}
html[data-density="comfortable"] #detailView button,
html[data-density="comfortable"] #mainContent header button {
  padding: 0.55rem 0.95rem !important;
  font-size: 0.8125rem !important;
  min-height: 2.5rem !important;
}
html[data-density="comfortable"] #mobileBottomNav {
  height: 4.25rem !important;
}
html[data-density="comfortable"] #mobileBottomNav button {
  min-height: 48px !important;
}

/* Application dynamique de la taille de lecture Markdown */
.prose-custom {
  font-size: var(--font-size-reading, 14px) !important;
}

/* ----------------------------------------------------------
   1. BOTTOM NAVIGATION BAR MOBILE (< 768px)
   ---------------------------------------------------------- */
#mobileBottomNav {
  background-color: var(--bg-header, rgba(15, 23, 42, 0.95));
  border-top: 1px solid var(--border-color, #1e293b);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#mobileBottomNav button {
  min-height: 44px;
  touch-action: manipulation;
  cursor: pointer;
  position: relative;
}

#mobileBottomNav button * {
  pointer-events: none;
}

/* ----------------------------------------------------------
   2. TOUCH TARGETS, DRAWER MOBILE & ERGONOMIE (< 768px)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  /* Éradication stricte des rails rétractés Desktop sur smartphone */
  #sidebarNavCollapsedRail,
  #promptListCollapsedRail {
    display: none !important;
  }

  /* Défilement fluide sans à-coups */
  body, #promptItemsList, #mainContent, #sidebarNav {
    -webkit-overflow-scrolling: touch;
  }

  /* Tiroir de navigation latéral mobile (Dossiers) : surface 100% opaque et prioritaire */
  #sidebarNav {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    width: min(300px, 85vw) !important;
    background-color: var(--bg-surface, #0f172a) !important;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.45) !important;
    z-index: 60 !important;
    padding-top: max(0.75rem, env(safe-area-inset-top, 0.75rem)) !important;
    padding-bottom: max(4rem, calc(3.5rem + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* Masque d'arrière-plan du tiroir mobile */
  #mobileDrawerOverlay {
    z-index: 55 !important;
  }

  /* Barre de navigation inférieure mobile (Bottom Nav) */
  #mobileBottomNav {
    z-index: 50 !important;
  }

  /* Padding bas de sécurité pour ne jamais masquer le contenu par la bottom bar */
  #mainContent,
  #promptListSection {
    padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Modales au premier plan absolu avec adaptation viewport mobile */
  #modalsContainer,
  #settingsModal,
  #categoryModal,
  #importModal,
  #purgeModal,
  #variableModal {
    z-index: 70 !important;
  }

  #settingsModal > div,
  #categoryModal > div,
  #importModal > div,
  #purgeModal > div,
  #variableModal > div {
    max-height: 85dvh !important;
    border-radius: 1.25rem !important;
    margin: 1rem !important;
  }
}

/* ----------------------------------------------------------
   3. TABLETTE OPTIMISÉE (768px à 1023px)
   ---------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  #sidebarNav {
    width: 11rem !important;
  }
  #promptListSection {
    width: 14rem !important;
    min-width: 220px !important;
  }
  #mainContent {
    flex: 1 1 0% !important;
    min-width: 0 !important;
  }
}

/* 3.1 LAPTOPS & ÉCRANS COMPACTS (1024px à 1280px) */
@media (min-width: 1024px) and (max-width: 1280px) {
  #sidebarNav {
    width: 11.5rem !important;
  }
  #promptListSection {
    width: 14.5rem !important;
  }
  #mainContent {
    flex: 1 1 0% !important;
    min-width: 460px !important;
  }
}

/* ----------------------------------------------------------
   4. SÉPARATEUR INTERACTIF DE VUE SCINDÉE (SPLITTER / RESIZER)
   ---------------------------------------------------------- */
#editorSplitter {
  position: relative;
  touch-action: none;
  cursor: col-resize;
  user-select: none;
}

#editorSplitter::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -4px;
  right: -4px;
  z-index: 20;
}

/* ----------------------------------------------------------
   5. BANDEAUX RÉTRACTABLES (COLLAPSIBLE HEADER)
   ---------------------------------------------------------- */
#detailHeaderCompactBar {
  min-height: 2.375rem;
  background-color: var(--bg-header, rgba(15, 23, 42, 0.95));
  border-bottom: 1px solid var(--border-color, #1e293b);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#editorMetaSection {
  transition: opacity 0.2s ease;
}

/* ----------------------------------------------------------
   6. RUBAN TACTILE FLUIDE TOOLBAR MARKDOWN (SCROLLBAR-NONE)
   ---------------------------------------------------------- */
.scrollbar-none {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
.scrollbar-none::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Scroller Horizontal Élégant & Thermorégulé (Barre d'outils Markdown & Rubans) */
.custom-h-scrollbar {
  overflow-x: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--border-color, rgba(148, 163, 184, 0.4)) transparent !important;
  -webkit-overflow-scrolling: touch;
}
.custom-h-scrollbar::-webkit-scrollbar {
  height: 4px !important;
  display: block !important;
}
.custom-h-scrollbar::-webkit-scrollbar-track {
  background: transparent !important;
}
.custom-h-scrollbar::-webkit-scrollbar-thumb {
  background: var(--border-color, rgba(148, 163, 184, 0.4)) !important;
  border-radius: 4px !important;
}
.custom-h-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color, #6366f1) !important;
}

@media (max-width: 767px) {
  .markdown-touch-ribbon {
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }
}

/* ----------------------------------------------------------
   7. ARCHITECTURE NATIVE APP SHELL (VIEWPORT FIXE 100DVH)
   ---------------------------------------------------------- */
html, body {
  height: 100% !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  width: 100dvw !important;
  max-width: 100dvw !important;
  overflow: hidden !important;
  overscroll-behavior: none !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}

#mainViewportLayout {
  min-height: 0 !important;
  min-width: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Confinement strict des colonnes */
#sidebarNav, #promptListSection, #mainContent {
  min-height: 0 !important;
  max-height: 100% !important;
}

/* Compartimentage étanche de toutes les modales In-App */
#modalsContainer .fixed.inset-0,
.modal-backdrop-container {
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

#modalsContainer .fixed.inset-0 > div,
#settingsModal > div,
#entityEditorModal > div,
#importModal > div,
#purgeModal > div,
#trashModal > div,
#categoriesModal > div,
#tagsModal > div {
  max-height: calc(88dvh) !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Scrollbars modernes ultra-fines (5px) */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}

::-webkit-scrollbar-track {
  background: transparent !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25) !important;
  border-radius: 9999px !important;
  transition: background 0.2s ease !important;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.5) !important;
}

/* ==========================================================
   MOTEUR DRAG & DROP HTML5 ANTI-CLIGNOTEMENT (PHASE 38)
   ========================================================== */
body.is-dragging .tree-node-row *,
body.is-dragging .clickup-doc-card *,
body.is-dragging .folder-hero-card *,
body.is-dragging .folder-child-card * {
  pointer-events: none !important;
}

.drag-target-hover {
  outline: 2px dashed var(--accent-color, #6366f1) !important;
  outline-offset: -2px !important;
  background-color: rgba(99, 102, 241, 0.18) !important;
  border-color: var(--accent-color, #6366f1) !important;
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.3) !important;
  transition: all 0.15s ease !important;
}

/* ==========================================================
   POIGNÉES DE DRAG & ACTIONS TACTILES SPACIEUSES (PHASE 39)
   ========================================================== */
.drag-handle {
  cursor: grab;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-muted, #94a3b8);
  opacity: 0.65;
  user-select: none;
  font-family: monospace;
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.25rem;
  transition: opacity 0.15s ease, color 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}

.drag-handle:hover {
  opacity: 1;
  color: var(--accent-color, #6366f1);
  background-color: var(--accent-badge-bg, rgba(99, 102, 241, 0.15));
  transform: scale(1.15);
}

.drag-handle:active {
  cursor: grabbing;
}

/* Boutons d'Action Rapide Universels Contrastés (ClickUp Style) */
.btn-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.4rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  background-color: var(--item-action-bg, rgba(30, 41, 59, 0.7));
  border: 1px solid var(--item-action-border, rgba(51, 65, 85, 0.6));
  color: var(--text-main, #f8fafc);
  box-shadow: var(--shadow-subtle, 0 1px 2px rgba(0, 0, 0, 0.08));
  transition: all 0.15s ease;
  line-height: 1;
}

.btn-card-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.btn-card-action-doc {
  color: #6366f1 !important;
  border-color: rgba(99, 102, 241, 0.4) !important;
  background-color: rgba(99, 102, 241, 0.12) !important;
}

.btn-card-action-doc:hover {
  color: #ffffff !important;
  background-color: #6366f1 !important;
  border-color: #4f46e5 !important;
}

.btn-card-action-folder {
  color: #f59e0b !important;
  border-color: rgba(245, 158, 11, 0.4) !important;
  background-color: rgba(245, 158, 11, 0.12) !important;
}

.btn-card-action-folder:hover {
  color: #ffffff !important;
  background-color: #f59e0b !important;
  border-color: #d97706 !important;
}

.btn-card-action-more {
  color: var(--text-muted, #94a3b8) !important;
  border-color: var(--item-action-border, rgba(51, 65, 85, 0.6)) !important;
  background-color: var(--item-action-bg, rgba(30, 41, 59, 0.7)) !important;
}

.btn-card-action-more:hover {
  color: var(--text-main, #ffffff) !important;
  border-color: var(--accent-color, #6366f1) !important;
  background-color: var(--bg-card-hover, rgba(99, 102, 241, 0.2)) !important;
}

/* Ergonomie Tactile Mobile & Tablette (Touch Targets 36-42px) */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .card-quick-actions {
    display: flex !important;
    gap: 0.375rem !important;
  }

  .card-quick-actions button,
  .btn-card-action {
    min-width: 2.125rem !important;
    min-height: 2.125rem !important;
    padding: 0.35rem 0.5rem !important;
    border-radius: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8125rem !important;
  }

  .tree-node-actions-overlay {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  .tree-node-actions-overlay button {
    min-width: 1.375rem !important;
    min-height: 1.375rem !important;
    width: 1.375rem !important;
    height: 1.375rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .drag-handle {
    width: 1.625rem !important;
    height: 1.625rem !important;
    opacity: 0.85 !important;
  }
}

/* ==========================================================
   SOUS-PHASE 48.4 : BLINDAGE TACTILE DU SÉPARATEUR SCINDÉ
   ========================================================== */
#editorSplitter {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative;
  background-color: var(--border-color) !important;
}

#editorSplitter::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 100%;
  cursor: col-resize;
  z-index: 25;
  touch-action: none !important;
}

#editorSplitter:active,
#editorSplitter:hover {
  background-color: var(--accent-color) !important;
}

/* ==========================================================
   PHASE 58 & 60 : SÉPARATEURS INTERACTIFS DE COLONNES (SPLITTERS)
   ========================================================== */
#sidebar1Resizer,
#sidebar2Resizer {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  position: relative;
  background-color: var(--border-color) !important;
}

#sidebar1Resizer > div,
#sidebar2Resizer > div {
  background-color: var(--text-muted) !important;
  opacity: 0.4;
}

#sidebar1Resizer::before,
#sidebar2Resizer::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 100%;
  cursor: col-resize;
  z-index: 25;
  touch-action: none !important;
}

#sidebar1Resizer:active,
#sidebar1Resizer:hover,
#sidebar2Resizer:active,
#sidebar2Resizer:hover {
  background-color: var(--accent-color, #6366f1) !important;
}

#sidebar1Resizer:active > div,
#sidebar1Resizer:hover > div,
#sidebar2Resizer:active > div,
#sidebar2Resizer:hover > div {
  background-color: #ffffff !important;
  opacity: 1;
}

body.is-resizing-columns {
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: col-resize !important;
}
body.is-resizing-columns * {
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* ==========================================================
   GESTION RÉACTIVE DU CLAVIER MOBILE & VISUAL VIEWPORT (PHASE 59.1)
   Garantit que le clavier virtuel ou la zone manuscrite ne masque jamais
   la zone d'édition ni le curseur sur mobile et tablette.
   ========================================================== */
:root {
  --visual-viewport-height: 100vh;
  --keyboard-offset: 0px;
}

/* Mode Clavier Actif sur Mobile et Tablette (<1024px) */
@media (max-width: 1023px) {
  body.keyboard-active {
    overflow: hidden !important;
  }

  /* Libération d'espace vertical : masquer la TopBar principale de l'application pendant la frappe */
  body.keyboard-active header {
    display: none !important;
  }

  /* Compacter la barre supérieure d'édition */
  body.keyboard-active #editorHeaderBar {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
    gap: 0.25rem !important;
  }

  /* Compacter le ruban tactile markdown */
  body.keyboard-active .markdown-touch-ribbon {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  /* Ajuster le conteneur éditeur/rendu à la hauteur exacte du visual viewport */
  body.keyboard-active #editorSplitContainer {
    max-height: calc(var(--visual-viewport-height, 100vh) - 75px) !important;
    height: calc(var(--visual-viewport-height, 100vh) - 75px) !important;
  }

  body.keyboard-active #editorPane,
  body.keyboard-active #previewPane {
    max-height: 100% !important;
  }
}