body {
   margin: 0;
   font-family: var(--font-family);
   background-color: var(--color-window-header);
   color: var(--color-text);
}

.container {
   display: flex;
   height: 100vh;
}

#file-system-nav {
   display: flex;
   flex-direction: column;
   /* height: 100vh; */
}

/* Header container on file-system panel */
.fs-header {
   position: sticky;
   top: 0;
   z-index: 100;
   isolation: isolate;
   background: var(--color-file-explorer);
   display: flex;
   padding: var(--spacing-sm);
   gap: 5px;
   border-radius: 0 var(--window-border-radius) 0 0;
   position: relative;
   /* anchor the pseudo-element */
   overflow: visible;
   /* allow the overlay to extend upward */
}

/* fade that sits ABOVE the header and covers content behind it */
.fs-header::before {
   content: "";
   position: absolute;
   left: 0;
   right: 10px;
   top: -18px;
   /* how far above the header the fade reaches */
   height: 18px;
   pointer-events: none;
   /* vertical gradient down into the header */
   background: linear-gradient(to top, var(--window-header-color), transparent);
}

/* Style for header buttons (tabs) */
.fs-tab {
   background: none;
   border: none;
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   color: var(--color-note-text);
   cursor: pointer;
   padding: 0.15rem var(--spacing-sm);
   padding: 0rem 0.35rem;
   padding-top: 0.05rem;
   border-radius: 4px;
   border: thin solid transparent;

}

.fs-tab:hover {
   background-color: var(--color-file-hover);
   color: var(--color-textHilight);
   /* border: thin solid var(--color-border-color) */
}

/* Active tab style */
.fs-tab.active {
   color: var(--color-textHilight);
   background-color: var(--color-file-active);
   font-weight: 600;
   border: thin solid var(--color-border-color)
}

/* Header stays fixed at the top */
.fs-header {
   flex-shrink: 0;
   /* Add any additional styling for your header here */
}

/* Middle section for different file system views */
#fs-views {
   flex: 1;
   /* Takes up remaining space between header and status bar */
   overflow: hidden;
   /* Prevents inner content from overflowing container boundaries */
   display: flex;
   flex-direction: column;
   /* max-height: calc(100% - 80px); */
}

/* Each view: hidden by default, set as flex container, scrollable when active */
.fs-view {
   flex: 1;
   /* Ensures the view consumes available vertical space */
   overflow-y: auto;
   /* Enables scrolling in the view */
   display: none;
   /* Hidden by default until activated */
   flex-direction: column;
}

/* Active view becomes visible */
.fs-view.active {
   display: flex;
}

/* File Explorer: 
  If you want only the file list to scroll (inside the explore view),
  use flex: 1 and overflow-y: auto. Adjust padding and scrollbar settings as needed.
*/
.file-explorer {
   flex: 1;
   overflow-y: auto;
   background-color: var(--color-file-explorer);
   padding: var(--spacing-sm);
   padding-top: 0;
   padding-bottom: 25px;
   padding-right: 2px;
   /* These properties customize the scrollbar appearance */
   scrollbar-width: thin;
   scrollbar-color: var(--scroll-thumb) var(--scroll-background);
}

/* Collapsed style for file-system-nav */
#file-system-nav.collapsed {
   width: 50px;
   max-width: 50px;
}

#file-system-nav.collapsed .fs-tab {
   font-size: var(--font-size-lg);
   font-size: 1.25em;
   border: thin solid transparent
}

#file-system-nav.collapsed .fs-tab:hover,
#file-system-nav.collapsed .fs-tab.active {
   background-color: transparent;
   color: var(--color-textHilight);
}

#file-system-nav.collapsed .fs-tab {
   position: relative;
   font-size: 1.25em;
}

/* Show line when active or hovered */
#file-system-nav.collapsed .fs-tab.active::before {
   content: "";
   position: absolute;
   left: -7px;
   top: -5px;
   bottom: -5px;
   width: 2px;
   background-color: var(--color-accent2);
   border-radius: 2px;
}

/* Hide views when collapsed */
#file-system-nav.collapsed #fs-views,
#file-system-nav.collapsed #status-bar {
   display: none;
}

/* Stack buttons vertically when collapsed */
#file-system-nav.collapsed .fs-header {
   flex-direction: column;
   align-items: center;
   padding: var(--spacing-sm) 0;
   gap: 10px;
   padding-top: 0;
   height: calc(100% - 49px);
   justify-content: flex-end;
}

#toggle-fs-nav {
   border: none;
   background: none;
   cursor: pointer;
   margin-left: auto;
   background: none;
   border: none;
   font-family: var(--font-family);
   font-size: var(--font-size-md);
   color: var(--color-note-text);
   cursor: pointer;
   padding: var(--spacing-xsm) var(--spacing-xsm);

   border-radius: var(--border-radius-button);
   /* margin-right: var(--spacing-sm); */
}

.chevron-icon {
   display: inline-block;
   transition: transform 0.2s ease;
   transform: rotate(0deg);
}

#toggle-fs-nav:hover {
   color: var(--color-textHilight);
   /* background-color: var(--color-file-hover); */
}

#file-system-nav.collapsed #toggle-fs-nav {
   margin-left: 0;
   margin-right: 0;
}

#file-system-nav.collapsed .chevron-icon {
   transform: rotate(180deg);
}

/* Default order: toggle comes last */
#toggle-fs-nav {
   order: 3;
}

/* When collapsed: move toggle to top */
#file-system-nav.collapsed #toggle-fs-nav {
   /* order: -1; */
   margin-top: auto;
}





/* Status bar: fixed at the bottom and should not scroll with other content */
.status-bar {
   /* flex-shrink: 0;
   display: flex;
   align-items: center;
   padding: var(--spacing-xsm) var(--spacing-sm);
   background-color: var(--color-file-explorer);
   font-size: var(--font-size-sm);
   color: var(--color-note-text);
   overflow: hidden; */
}

.status-bar-text {
   flex: 1;
   min-width: 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   opacity: 1;
   margin-right: 5px;
}

.spinner-inline {
   flex-shrink: 0;
   position: relative;
   top: -3px;
}

.content-view {
   flex: 1;
   padding: var(--spacing-lg);
   background-color: var(--color-file-explorer);
   overflow-y: auto;
}

.tree-item {
   border-radius: var(--border-radius-button);
}

.tree-item-header {
   display: flex;
   align-items: center;
   padding: 0.15rem var(--spacing-sm);
   cursor: pointer;
   border-radius: var(--border-radius-button);
   border-radius: 4px;
   user-select: none;
   position: relative;
   color: var(--color-text);
   /* font-size: 14px; */
   font-size: var(--font-size-sm);
   /* margin-bottom: 2px; */
   /* margin-bottom: 2px;
      padding: 0.25rem var(--spacing-sm); */

   border: thin solid transparent;
   max-height: 26px
}

.file-explorer .tree-item-header {
   padding-right: 0;
}

.item-options-button {
   opacity: 0;
}

@media (max-width:768px) {
   .item-options-button {
      opacity: 1;
   }
}

.tree-item-header:hover .item-options-button {
   opacity: 1;
}

.tree-item-header:hover {
   background-color: var(--color-file-hover);
   color: var(--color-textHilight)
}

.tree-item-header.active {
   background-color: var(--color-file-active);
   color: var(--color-textHilight);
   /* border: thin solid var(--color-border-color); */
}

.tree-item-header.selected {
   background-color: var(--color-selected);
   color: var(--color-textHilight)
}

.tree-item-header.context-menu-active {
   position: relative;
   background-color: var(--color-selected);
   /* border-radius: var(--border-radius-button); */
}

/* Add the overlay border */
.tree-item-header.context-menu-active::before {
   content: "";
   position: absolute;
   inset: 0;
   /* top: 0; right: 0; bottom: 0; left: 0 */
   /* border-left: 2px solid var(--color-accent2); */
   border-radius: var(--border-radius-button);
   pointer-events: none;
   z-index: 1;
}

.tree-item-icon {
   margin-right: var(--spacing-sm);
   font-size: 0.9rem;
   position: relative;
   top: 0px;
}

/* .js-text-icon {
   display: inline-block;
   font-weight: bold;
   font-size: 0.85em!important;
   width: 1em;
   text-align: center;
   font-family: var(--font-family) !important;
   padding-left: 2px;
} */

.tree-item-rename-input {
   font-size: var(--font-size-md);
   font-family: inherit;
   background: transparent;
   color: var(--color-text);
   border: 1px solid var(--color-accent2);
   border-radius: 0;
   padding: 1px 0px;
   width: 90%;
   outline: none;
   margin: -2px 0;
   margin-left: -1px;
   z-index: 3;
}

.folder-icon {
   /* color: var(--color-text); */
   margin-right: var(--spacing-sm);
}

.tree-item-chevron {
   margin-right: var(--spacing-xsm) !important;
}
#explore-view .file-explorer .tree-item-chevron {
   display: none;
}
.tree-item-label {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.tree-children {
   padding-left: var(--spacing-xsm);
   margin-left: var(--spacing-md);
   border: 1px dashed transparent;
   border-left: 1px solid var(--color-border-color);
   /* gap: var(--spacing-xsm); */
   display: flex;
   flex-direction: column;
   /* margin-top: var(--spacing-xsm); */
}

.tree-children:hover {
   border-left: 1px solid var(--color-border-hover);
}

.drag-over {
   background-color: var(--color-selected) !important;
   border-radius: 5px;
   border-color: transparent !important;
}

.dragging {
   opacity: 0.5;
}

/* pre {
   border: 1px solid var(--color-fourth);
   padding: var(--spacing-lg);
   background-color: var(--color-secondary);
   border-radius: var(--border-radius-button);
   overflow: auto;
   font-family: "Courier New", Courier, monospace;
} */



.root-folder-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: var(--spacing-xsm) var(--spacing-md);
   padding-right: var(--spacing-sm);
   padding-right: 2px;
   /* padding-left: var(--spacing-sm); */
   font-weight: 600;
   background-color: var(--color-file-explorer);
   /* position: sticky;
   top: 0;
   background-color: var(--color-secondary);
   z-index: 1; */
   /* gap: 3px; */
}

.root-folder-label {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-right: var(--spacing-sm);
   font-size: var(--font-size-sm);
   font-weight: 500;
   color: var(--color-note-text);
}

.root-folder-buttons {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   flex-shrink: 0;
}

.icon-button {
   background: none;
   border: none;
   cursor: pointer;
   padding: calc(var(--spacing-xsm) / 2) var(--spacing-sm);
   font-size: var(--font-size-md);
   color: var(--color-note-text);
}

.root-folder-header .icon-button {
   margin-left: 0;
}

#root-options {
   font-size: var(--font-size-sm) !important;
}

.root-folder-header .icon-button:not(#root-options) {
   font-size: var(--font-size-md);
}

.root-folder-header .icon-button {
   padding: var(--spacing-xsm) var(--spacing-sm) !important;
   border: thin solid transparent
}

.root-folder-header .icon-button:hover {
   /* background-color: var(--color-file-hover);
   border: thin solid var(--color-border-color) */

}

.icon-button:hover {
   border-radius: var(--border-radius-button);
   color: var(--color-textHilight);
}

.dropdown-menu {
   position: absolute;
   background: var(--color-fourth);
   border: 1px solid var(--color-border-hover);
   border-radius: var(--border-radius-button);
   box-shadow: var(--color-box-shadow);
   z-index: 1000;
   /* overflow: hidden; */
   padding: var(--spacing-xsm);
   gap: var(--spacing-xsm);
   display: flex;
   flex-direction: column;
   min-width: 155px;
   /* min-width: 215px; */
   /* animation: dropdown-fade 0.1s ease; */
}

.dropdown-item {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 2px;
   cursor: pointer;
   font-size: var(--font-size-xsm);
   padding: 0.26rem var(--spacing-sm);
   padding-right: var(--spacing-md);
   color: var(--color-text);
   text-align: left;
   width: 100%;
   border-radius: 4px;
   font-weight: 500;
}

.dropdown-item span {
   flex: 1;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.dropdown-item .shortcut {
   margin-left: auto;
   color: var(--color-note-text);
   white-space: nowrap;
   min-width: 110px;
   text-align: right;
   padding-right: 15px;
   font-size: 0.725rem;
}

.dropdown-item:hover .shortcut:not(.dropdown-item.has-submenu:hover>.submenu .shortcut) {
   color: var(--color-textHilight) !important;
}

.submenu .dropdown-item:hover .shortcut {
   color: var(--color-textHilight) !important;

}

.dropdown-item:hover {
   background-color: var(--color-border-hover);
   color: var(--color-textHilight);
}

.dropdown-item:hover i:not(.dropdown-item.has-submenu:hover>.submenu i, .dropdown-btn-donate i) {
   color: var(--color-textHilight) !important;
}

.dropdown-item i:not(.submenu-icon, .submenu-icon i) {
   font-size: 14px !important;
   position: relative;
   top: 0px;
}

.dropdown-divider {
   height: 1px;
   background-color: var(--color-border-hover);
}

.dropdown-item.has-submenu {
   position: relative;
}


.dropdown-item.has-submenu>.submenu {
   display: none;
   position: absolute;
   top: -4px;
   left: calc(100% - 4px);
   margin-left: 4px;
   flex-direction: column;
   min-width: 150px;
   /* min-width: 215px; */
   background: var(--color-fourth);
   border: 1px solid var(--color-border-hover);
   border-radius: var(--border-radius-button);
   box-shadow: var(--color-box-shadow);
   padding: var(--spacing-xsm);
   z-index: 1001;
}

/* Flip to left when needed */
.dropdown-item.has-submenu>.submenu.left {
   left: auto;
   right: calc(100% - 4px);
   margin-left: 0;
   margin-right: 4px;
}

/* 🔥 On hover, show submenu */
.dropdown-item.has-submenu:hover>.submenu {
   display: flex;
}

/* Default state */
.submenu {
   display: none;
}

/* Show only when JS adds this class */
.submenu.visible {
   display: flex;
}

/* Chevron style */
.submenu-icon {
   margin-left: auto;
   color: var(--color-note-text);
   padding-right: 2px;
   font-size: 16px !important;
}

.dropdown-item.has-submenu:hover>.submenu-icon {
   opacity: 1;
}

.dropdown-btn-donate {
   /* background-color: #598bdb;
   color: white;
   font-weight: 600;
   font-size: 0.8rem; */
   background-color: var(--color-border-hover);
}

.dropdown-item img {
   display: inline-block;
   vertical-align: middle;
   object-fit: contain;
   width: 1.35em;
   height: 1.35em;
   transition: transform 0.3s ease;
   will-change: transform;
}

.dropdown-item:hover img {
   animation: kofiBounceWiggle 1s ease;
}


@keyframes kofiBounceWiggle {
   0% {
      transform: scale(1) rotate(0deg);
   }

   12% {
      transform: scale(1.08) rotate(14deg);
   }

   25% {
      transform: scale(1.08) rotate(-14deg);
   }

   37% {
      transform: scale(1.07) rotate(10deg);
   }

   50% {
      transform: scale(1.07) rotate(-10deg);
   }

   62% {
      transform: scale(1.05) rotate(6deg);
   }

   75% {
      transform: scale(1.05) rotate(-6deg);
   }

   87% {
      transform: scale(1.02) rotate(2deg);
   }

   100% {
      transform: scale(1) rotate(0deg);
   }
}



.dropdown-btn-donate:hover.dropdown-btn-donate i,
.dropdown-btn-donate:hover {
   background-color: #598bdb;
   color: white;
}


/* -------------------------------------------------- */
/* 🧩 Custom Dropdown Panel */
/* -------------------------------------------------- */
.custom-dropdown {
   min-width: 400px;
   display: flex;
   flex-direction: column;
   background: var(--color-fourth);
   border: 1px solid var(--color-border-hover);
   border-radius: var(--border-radius-button);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   padding: var(--spacing-md);
   font-size: var(--font-size-xsm);
   animation: dropdown-fade 0.1s ease;
   max-height: 90vh;
   overflow-y: auto;
}

@media (max-width:500px) {
   .custom-dropdown {
      min-width: 290px;
   }
}

.custom-dropdown .visibility-badge {
   width: auto;
   max-width: max-content;
   margin-left: auto;
}

@keyframes dropdown-fade {
   from {
      opacity: 0;
      transform: translateY(-8px);
   }

   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.custom-dropdown-wrapper {
   display: flex;
   flex-direction: column;
   gap: 1rem;
}


.visibility-container {
   display: flex;
   justify-content: flex-end;
   /* clips inner border radii */
   /* border: thin solid var(--color-border-hover); */
}

.visibility-btn {
   all: unset;
   /* resets all styles so border doesn’t double up */
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 0.25rem var(--spacing-md);
   padding-left: var(--spacing-sm);
   font-size: var(--font-size-xsm);
   font-family: var(--font-family);
   font-weight: 600;
   background-color: var(--color-fifth);
   color: var(--color-note-text);
   cursor: pointer;
   flex: 1;
   /* each button takes equal space */
   text-align: center;
   border: thin solid var(--color-border-hover);
   border-left: thin solid var(--color-border-hover);
   transition: background-color 0.2s ease;
   /* opacity: 0.75 */
}

.visibility-btn:first-child {
   border-right: none;
   border-radius: 4px 0 0 4px;
   /* no border on first */
}

.visibility-btn:last-child {
   border-left: none;
   border-radius: 0px 4px 4px 0px;
}

.visibility-btn:hover {
   color: var(--color-textHilight);
   background-color: var(--color-border-hover);
   opacity: 1;
}

.visibility-icon {
   font-size: 0.8rem;
   line-height: 1;
}

.visibility-btn.active {
   opacity: 1;
}

/* Optional: distinguish styles by type */
.visibility-btn.private.active {
   background-color: var(--color-error);
   color: white;
   border-color: var(--color-error);
}

.visibility-btn.unlisted.active {
   background-color: var(--color-success);
   color: white;
   border-color: var(--color-success);
}

.visibility-btn.public.active {
   background-color: var(--color-info);
   color: white;
   border-color: var(--color-info);

}

.visibility-note-text {
   font-weight: 500;
   color: var(--color-note-text);
   font-family: var(--font-family);
   margin-bottom: -0.7rem;
   font-size: var(--font-size-xsm);
   padding-left: 3px;
   width: 100%;
   display: flex;
   align-items: center;
}


/* -------------------------------------------------- */
/* 🖊️ Inputs & Textareas */
/* -------------------------------------------------- */
.custom-dropdown input,
.custom-dropdown textarea {
   width: 100%;
   padding: 0.25rem var(--spacing-md);
   font-size: var(--font-size-xsm);
   font-family: var(--font-family);
   color: var(--color-text);
   background-color: var(--color-fifth);
   border: 1px solid var(--color-border-hover);
   border-radius: 4px;
   outline: none;
   transition: border 0.2s ease;
}

.custom-dropdown input:hover,
.custom-dropdown textarea:hover {
   border-color: var(--color-border-hover);
}

.custom-dropdown input:focus,
.custom-dropdown textarea:focus {
   border-color: var(--color-accent2);
   box-shadow: 0 0 0 2px rgba(var(--color-accent2-rgb), 0.2);
}

.custom-dropdown textarea {
   resize: vertical;
   min-height: 80px;
   line-height: 1.4;
}

/* -------------------------------------------------- */
/* 🧭 Icon-wrapped Input */
/* -------------------------------------------------- */
.custom-input-icon-wrapper {
   position: relative;
   width: 100%;
}

.custom-input-icon-wrapper i {
   position: absolute;
   left: var(--spacing-sm);
   top: 50%;
   transform: translateY(-50%);
   font-size: 14px;
   color: var(--color-note-text);
   pointer-events: none;
   transition: color 0.2s ease;
}

.custom-input-icon-wrapper input {
   padding-left: calc(var(--spacing-md) + 16px) !important;
}

.custom-input-icon-wrapper input:focus+i {
   color: var(--color-accent2);
}

.author-title {
   padding: 0 var(--spacing-sm);
   padding-left: 0;
   overflow: hidden;
   color: var(--color-note-text);
   display: flex;
   align-items: center;
   background-color: var(--color-selected);
   padding: 0.26rem var(--spacing-sm);
   padding-right: var(--spacing-md);
   border-radius: 4px;
   border: 1px solid var(--color-border-hover);
   margin-bottom: -5px;

   /* width: auto;
   max-width: max-content; */
}

.author-avatar {
   width: 20px;
   height: 20px;
   border-radius: 50%;
   margin-right: 3px;
   object-fit: cover;
   /* border: 1px solid var(--color-border-color) */
}

.author-span {
   font-weight: 500;
   font-size: var(--font-size-lg);
   color: var(--color-textHilight);
   margin-left: 4px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 0;
   flex: 1;
}

.form-label {
   display: block;
   font-weight: 500;
   color: var(--color-note-text);
   font-family: var(--font-family);
   margin-bottom: -0.7rem;
   font-size: var(--font-size-xsm);
   padding-left: 3px;
   width: 100%;
   display: flex;
   align-items: center;
}

.two-col-row .form-label {
   margin-bottom: 0.25rem;
}

.help-icon {
   display: block;
   margin-left: 4px;
   font-weight: bold;
   color: var(--color-note-text);
   cursor: help;
   border-radius: 50%;
   font-size: 0.85rem;
   line-height: 16px;
   vertical-align: middle;
   margin-top: -4px;
   margin-left: auto;
   padding: 0 6px;
   opacity: 0.75;
}

/* -------------------------------------------------- */
/* 💾 Save Button */
/* -------------------------------------------------- */
.custom-dropdown .btn {
   align-self: flex-end;
   padding: var(--spacing-sm) var(--spacing-md);
   background: var(--color-accent2);
   color: var(--color-accent2-text);
   font-weight: 500;
   border: none;
   border-radius: var(--border-radius-button);
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   margin: var(--spacing-sm);
   margin-top: 0;
   margin-left: auto;
}

.custom-dropdown .btn:hover {
   background: var(--color-accent2-hover);
   box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}

.custom-dropdown .btn:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* -------------------------------------------------- */
/* 🧷 Tab Bar */
/* -------------------------------------------------- */
.dropdown-tabs {
   display: flex;
   gap: 2px;
   border-bottom: 1px solid var(--color-border-hover);
   padding-bottom: 0;
}

.dropdown-tab-btn {
   flex: 1;
   padding: var(--spacing-sm) var(--spacing-md);
   background: transparent;
   border: none;
   border-bottom: 2px solid transparent;
   font-weight: 500;
   font-size: var(--font-size-xsm);
   color: var(--color-note-text);
   cursor: pointer;
   transition: all 0.2s ease;
   font-family: var(--font-family);
}

.dropdown-tab-btn:hover {
   color: var(--color-text);
   background: rgba(var(--color-border-rgb), 0.3);
}

.dropdown-tab-btn.active {
   color: var(--color-textHilight);
   border-bottom: 2px solid var(--color-accent2);
   background: transparent;
}

/* -------------------------------------------------- */
/* 📑 Tab Content Wrapper */
/* -------------------------------------------------- */
.dropdown-tab-content {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
   padding: var(--spacing-sm);
   padding-top: var(--spacing-sm);
}

.tab-panel {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-md);
}

/* -------------------------------------------------- */
/* 🖼️ Cover Tab (Image Preview, Input + Button) */
/* -------------------------------------------------- */
.cover-row {
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
}

.cover-row input {
   flex: 1;
}

.cover-preview {
   width: 100%;
   height: auto;
   max-height: 40px;
   min-height: 40px;
   min-width: 40px;
   object-fit: contain;
   border: 1px solid var(--color-border-color);
   border-radius: 4px;
   background: var(--color-third);
   padding: 0.3rem;
   transition: border-color 0.2s ease;
}

.cover-preview:not([src=""]):hover {
   border-color: var(--color-accent2);
}

/* 🔄 Refresh Icon Button */
.btn-icon {
   padding: calc(var(--spacing-sm) - 3px) calc(var(--spacing-sm) - 3px);
   background: transparent;
   border: 1px solid transparent;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s ease;
   color: var(--color-note-text);
}

.btn-icon:hover {
   background: var(--color-border-hover);
   color: var(--color-text);
}

.btn-icon i {
   font-size: 1.1rem;
   display: flex;
   align-items: center;
   justify-content: center;
}















/* Parent container for tool view */
#tools-view {
   flex-direction: column;
   background-color: var(--color-file-explorer);
   /* padding-top: var(--spacing-sm); */
}

.tools-tabs-header {
   display: flex;
   flex-direction: column;
   background-color: var(--color-file-explorer);
   border-radius: var(--border-radius);
   /* border: 1px solid var(--color-border-color); */
   /* box-shadow: var(--shadow-sm); */
   height: 100%;
}

/* Tool tab - list style */
/* 1) Base layout: left‑aligned, vertical text block */
.tool-tab {
   display: flex;
   align-items: flex-start;
   /* top‑align icon+text block */
   gap: var(--spacing-sm);
   padding: var(--spacing-sm);
   position: relative;
   /* for absolutely‑positioned grab handle */
   background-color: var(--color-file-explorer);
   border-radius: 0;
   border: 1px solid transparent;
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   color: var(--color-text);
   cursor: pointer;
   transition: background-color 0.2s ease, color 0.2s ease;
   width: 100%;
   /* margin-bottom: var(--spacing-xsm); */
}

/* 2) Container for title + description */
.tool-text {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   /* ensure left‑aligned text */
}

/* 3) Title styling */
.tool-title {
   font-weight: 600;
   line-height: 1.2;
}

/* 4) Description styling */
.tool-description {
   display: -webkit-box;
   /* establish a “flexible” box */
   -webkit-box-orient: vertical;
   /* stack children vertically */
   -webkit-line-clamp: 2;
   /* <-- limit to 2 lines */
   overflow: hidden;
   /* hide anything beyond that */
   text-overflow: ellipsis;
   /* show “…” at the end */
   line-height: 1.2;
   /* keep your existing line‑height */
   word-break: break-word;
   color: var(--color-note-text);
   font-size: var(--font-size-xsm);
   margin-top: 0.25rem;
   text-align: left;
   /* force left alignment */
   padding-right: 15px;
}


/* 5) Hover / active */
.tool-tab:hover {
   background-color: var(--color-file-hover);
   color: var(--color-textHilight);
}

.tool-tab.active {
   background-color: var(--color-file-active);
   border-color: var(--color-accent);
   color: var(--color-textHilight);
   font-weight: 600;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* 6) Grab handle: hidden until hover */
.grab-handle {
   position: absolute;
   right: 0.5rem;
   top: 50%;
   transform: translateY(-50%);
   opacity: 0;
   cursor: grab;
   transition: opacity 0.2s ease;
   pointer-events: auto;
   color: var(--color-note-text) !important;
   font-size: 1rem;
}

/* reveal on hover */
.tool-tab:hover .grab-handle {
   opacity: 1;
   color: var(--color-textHilight);
}

.tool-tab i:not(.grab-handle) {
   aspect-ratio: 1;
   font-size: 1rem;
   margin-top: var(--spacing-xsm);
   background-color: var(--color-fifth);
   padding: var(--spacing-xsm);
   border-radius: 4px;
   pointer-events: none;
}

.tool-tab {
   position: relative;
}

/* always draw a 2px line at the top edge of whichever tab is our insertion target */
.tool-tab.drag-over-before::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 3px;
   background-color: var(--color-accent2);
}

/* if dropping after the last tab, draw it at the bottom of that last tab */
.tool-tab.drag-over-after::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   background-color: var(--color-accent2);
}