/* browser.css - the folder view (browse.ejs): toolbar + selection toolbar, the file
 * listing (list and grid), row actions, inline rename, details panel, empty state and
 * the drag-to-upload overlay. Uses the shared design tokens from app.css (:root).
 * Motion is at the end and switches off under prefers-reduced-motion. */

/* ------------------------------------------------------------------ icons */
/* Stroke icons drawn as CSS masks, so they take the text colour (currentColor). */
.bi {
  display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -3px;
  background-color: currentColor;
  -webkit-mask: var(--bi) center / contain no-repeat; mask: var(--bi) center / contain no-repeat;
}
:root {
  --bi-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --bi-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --bi-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --bi-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E");
  --bi-toast-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236ee7b7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --bi-toast-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23fca5a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.bi-upload { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m17 8-5-5-5 5'/%3E%3Cpath d='M12 3v12'/%3E%3C/svg%3E"); }
.bi-download { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.bi-file-up { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M12 18v-6'/%3E%3Cpath d='m9 15 3-3 3 3'/%3E%3C/svg%3E"); }
.bi-folder-up { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3Cpath d='M12 17v-6'/%3E%3Cpath d='m9 14 3-3 3 3'/%3E%3C/svg%3E"); }
.bi-folder { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E"); }
.bi-folder-plus { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3Cpath d='M12 10v6'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E"); }
.bi-folder-open { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E"); }
.bi-file { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E"); }
.bi-files { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7h-3a2 2 0 0 1-2-2V2'/%3E%3Cpath d='M9 18a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h7l4 4v10a2 2 0 0 1-2 2Z'/%3E%3Cpath d='M3 7.6v12.8A1.6 1.6 0 0 0 4.6 22h9.8'/%3E%3C/svg%3E"); }
.bi-plus { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.bi-share { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cpath d='m8.59 13.51 6.83 3.98'/%3E%3Cpath d='m15.41 6.51-6.82 3.98'/%3E%3C/svg%3E"); }
.bi-users { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.bi-link { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E"); }
.bi-trash { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/%3E%3Cpath d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E"); }
.bi-more { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E"); }
.bi-list { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13'/%3E%3Cpath d='M8 12h13'/%3E%3Cpath d='M8 18h13'/%3E%3Cpath d='M3 6h.01'/%3E%3Cpath d='M3 12h.01'/%3E%3Cpath d='M3 18h.01'/%3E%3C/svg%3E"); }
.bi-grid { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='7' height='7' x='3' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='3' rx='1.5'/%3E%3Crect width='7' height='7' x='14' y='14' rx='1.5'/%3E%3Crect width='7' height='7' x='3' y='14' rx='1.5'/%3E%3C/svg%3E"); }
.bi-info { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E"); }
.bi-close { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E"); }
.bi-move { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H20a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-1'/%3E%3Cpath d='M2 13h10'/%3E%3Cpath d='m9 16 3-3-3-3'/%3E%3C/svg%3E"); }
.bi-copy { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='14' height='14' x='8' y='8' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E"); }
.bi-rename { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.38 3.62a2.12 2.12 0 1 1 3 3L7.37 18.64a2 2 0 0 1-.86.5l-2.87.84a.5.5 0 0 1-.62-.62l.84-2.87a2 2 0 0 1 .5-.86Z'/%3E%3C/svg%3E"); }
.bi-sort { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21 16-4 4-4-4'/%3E%3Cpath d='M17 20V4'/%3E%3Cpath d='m3 8 4-4 4 4'/%3E%3Cpath d='M7 4v16'/%3E%3C/svg%3E"); }
.bi-open { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.bi-clock { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E"); }
.bi-star { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.52 2.3a.53.53 0 0 1 .95 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.16.76a.53.53 0 0 1 .3.9l-3.74 3.64a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.87L2.16 9.8a.53.53 0 0 1 .29-.9l5.17-.76a2.12 2.12 0 0 0 1.6-1.16z'/%3E%3C/svg%3E"); }
.bi-image { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.09-3.09a2 2 0 0 0-2.82 0L6 21'/%3E%3C/svg%3E"); }
.bi-chevron-right { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E"); }
.bi-chevron-down { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.bi-arrow-up { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E"); }
.bi-check { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.bi-star-fill { --bi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.52 2.3a.53.53 0 0 1 .95 0l2.31 4.68a2.12 2.12 0 0 0 1.6 1.16l5.16.76a.53.53 0 0 1 .3.9l-3.74 3.64a2.12 2.12 0 0 0-.61 1.88l.88 5.14a.53.53 0 0 1-.77.56l-4.62-2.43a2.12 2.12 0 0 0-1.97 0L6.4 21.01a.53.53 0 0 1-.77-.56l.88-5.14a2.12 2.12 0 0 0-.61-1.87L2.16 9.8a.53.53 0 0 1 .29-.9l5.17-.76a2.12 2.12 0 0 0 1.6-1.16z' fill='black'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ breadcrumbs */
.browse-crumbs { gap: 2px; margin-bottom: 12px; font-size: 13px; }
/* Wide screens show this path in the top bar (header.ejs); only narrow ones,
   where the top bar hides it, show it here. */
@media (min-width: 981px) { .browse-crumbs { display: none; } }
.browse-crumbs .crumb-link,
.browse-crumbs .crumb-current {
  display: inline-block; max-width: 280px; padding: 3px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 8px;
}
.browse-crumbs .crumb-link { color: var(--text-2); transition: color .15s, background-color .15s; }
.browse-crumbs .crumb-link:hover { color: var(--text); background: rgba(255, 255, 255, .06); text-decoration: none; }
.browse-crumbs .crumb-current { color: var(--text); font-weight: 600; }
.browse-crumbs .crumb-sep {
  width: 14px; height: 14px; flex: none; opacity: .45; background-color: currentColor;
  -webkit-mask: var(--bi-chev) center / contain no-repeat; mask: var(--bi-chev) center / contain no-repeat;
}

/* ---------------------------------------------------------------- toolbar */
/* The folder title and its History / Recycle Bin buttons share one short line. */
.browse-page > .page-head { align-items: center; flex-wrap: nowrap; margin-bottom: 10px; }
.browse-page > .page-head > div:first-child { min-width: 0; }
.browse-page > .page-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
.browse-page > .page-head .head-actions { flex: none; width: auto; flex-wrap: nowrap; gap: 2px; }
.browse-page > .page-head .head-actions .icon-btn { width: 30px; height: 30px; }
/* Desktop: the title sits on the toolbar's line (like Seafile's path bar), so the list starts higher. */
@media (min-width: 981px) {
  .browse-page { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; }
  .browse-page > * { grid-column: 1 / -1; min-width: 0; }
  .browse-page > .page-head { grid-column: 1; flex-wrap: nowrap; min-height: 42px; max-width: min(34vw, 460px); }
  .browse-page > .page-head > div:first-child { min-width: 0; }
  .browse-page > .page-head h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
  .browse-page > .page-head .page-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .browse-page > .browse-bar { grid-column: 2; }
}
.browse-bar { position: relative; z-index: 60; margin-bottom: 10px; }
.browse-toolbar { justify-content: space-between; gap: 8px; min-height: 42px; margin-bottom: 0; padding: 4px; border-radius: 13px; }
.browse-toolbar .toolbar-main { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.browse-toolbar .toolbar-view { display: flex; flex: none; align-items: center; gap: 6px; margin-left: auto; }
.browse-toolbar .domain-picker-form { margin-left: 0; gap: 6px; }
/* The picker's own value ("Use global default") says what it is; dropping the word "Domain"
   keeps the toolbar on one line. (The label element stays, so the select keeps its name.) */
@media (min-width: 981px) {
  .browse-toolbar .domain-picker-form label { gap: 0; font-size: 0; }
  .browse-toolbar .domain-picker-form .custom-select { min-width: 0; }
}
/* The upload link bar right under the toolbar already says (and shows) it; one line less. */
.browse-toolbar .toolbar-note { display: none; }
/* Read-only lists (Recent, Favorites, Search, read-only shares): just the view controls. */
.browse-toolbar.view-only { justify-content: flex-end; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.browse-toolbar.view-only::before, .browse-toolbar.view-only::after { content: none; }
.browse-toolbar.view-only .toolbar-main { display: none; }
.browse-toolbar .btn .bi { width: 15px; height: 15px; }
.browse-toolbar .new-caret {
  display: inline-block; width: 12px; height: 12px; margin-left: -2px; border: 0; opacity: .7; background-color: currentColor;
  -webkit-mask: var(--bi-caret) center / contain no-repeat; mask: var(--bi-caret) center / contain no-repeat;
  transition: transform .2s var(--ease);
}
.browse-toolbar .new-dropdown.open .new-caret { transform: rotate(180deg); }
.browse-toolbar .new-dropdown-menu button { display: flex; align-items: center; gap: 10px; }
.browse-toolbar .new-dropdown-menu .bi { color: var(--text-3); }
.browse-toolbar .new-dropdown-menu button:hover .bi { color: #c4b5fd; }

.sort-trigger { min-height: 32px; padding: 0 10px; gap: 7px; font-size: 12.5px; }
.sort-trigger .bi { transition: transform .25s var(--spring); }
.sort-trigger.sorted-desc .bi { transform: scaleY(-1); }
.sort-dropdown .sort-menu { left: auto; right: 0; min-width: 190px; transform-origin: top right; }
.sort-menu button { position: relative; padding-right: 34px; }
.sort-menu button[aria-checked='true'] { color: var(--text); }
.sort-menu button[aria-checked='true']::after {
  content: ''; position: absolute; right: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; color: #a5f3fc;
  background-color: currentColor; -webkit-mask: var(--bi-tick) center / contain no-repeat; mask: var(--bi-tick) center / contain no-repeat;
}

.view-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: rgba(0, 0, 0, .26); border: 1px solid var(--line); border-radius: 10px;
}
.view-toggle .icon-btn { width: 30px; height: 28px; border-radius: 8px; }
.view-toggle .icon-btn[aria-pressed='true'],
.details-toggle[aria-pressed='true'] {
  color: #fff; background: rgba(139, 92, 246, .3); box-shadow: inset 0 0 0 1px rgba(167, 139, 250, .38);
}
.details-toggle { width: 32px; height: 32px; }

/* The selection toolbar takes the toolbar's place while anything is selected. */
.browse-bar .selection-bar { min-height: 42px; margin-bottom: 0; padding: 4px 8px 4px 4px; gap: 6px; border-radius: 13px; }
.selection-bar .selection-clear { width: 32px; height: 32px; color: #ddd6fe; }
.selection-bar .selection-clear:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.selection-bar .selection-count { min-width: 74px; margin-right: 6px; }
.selection-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.selection-actions .btn { min-height: 32px; padding: 0 11px; gap: 7px; font-size: 12.5px; border-radius: 9px; }
.selection-actions .btn .bi { width: 15px; height: 15px; }
.selection-actions .icon-btn { width: 32px; height: 32px; color: #ddd6fe; }

/* ---------------------------------------------------------------- listing */
.dirent-list .select-colgroup { width: 40px; }
.dirent-list .favorite-colgroup { width: 32px; }
.dirent-list .size-colgroup { width: 104px; }
.dirent-list .modified-colgroup { width: 150px; }
.dirent-list .sharing-colgroup { width: 150px; }
.dirent-list .actions-colgroup { width: 136px; }
/* Rows with a domain picker (only once an admin has added custom domains): a compact picker and a
   wider Sharing column, so the picker's "save" never ends up under the row actions. */
.dirent-list.has-domains .sharing-colgroup { width: 236px; }
/* Badge, picker and save stay on one line, so a row with a domain picker is as short as any other. */
@media (min-width: 961px) { .dirent-list.has-domains .sharing-cell { flex-wrap: nowrap; gap: 5px; } }
.dirent-list .domain-row-form .custom-select { min-width: 0; width: 100px; }
.dirent-list .domain-row-form .custom-select-button { min-height: 26px; padding: 3px 22px 3px 8px; border-radius: 8px; font-size: 12px; }
.dirent-list .domain-row-form .link-btn { padding: 2px 5px; font-size: 12px; }
.dirent-list .domain-row-form .custom-select-button::after { right: 10px; width: 6px; height: 6px; }
/* Narrower desktops and tablets (961-1239px, before rows turn into cards): slimmer secondary columns
   and only the "..." in the actions column (like the details-open layout), so names stay readable. */
@media (min-width: 961px) and (max-width: 1239px) {
  .dirent-list .size-colgroup { width: 84px; }
  .dirent-list .modified-colgroup { width: 116px; }
  .dirent-list .sharing-colgroup { width: 104px; }
  .dirent-list.has-domains .sharing-colgroup { width: 228px; }
  .dirent-list .actions-colgroup { width: 52px; }
  .dirent-shell.view-list .row-op:not(.row-more) { display: none; }
}

.dirent-list th.sortable { padding: 0; }
.dirent-list .sort-btn {
  display: inline-flex; align-items: center; gap: 6px; width: 100%; height: 100%; min-height: calc(var(--row-head) - 2px); padding: 4px var(--cell-x);
  color: inherit; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer;
  transition: color .15s;
}
.dirent-list .sort-btn:hover { color: var(--text); }
.dirent-list .sort-btn:focus-visible { border-radius: 8px; }
.dirent-list .sort-arrow {
  width: 12px; height: 12px; flex: none; opacity: 0; background-color: currentColor; transform: translateY(2px);
  -webkit-mask: var(--bi-up) center / contain no-repeat; mask: var(--bi-up) center / contain no-repeat;
  transition: opacity .15s, transform .28s var(--spring);
}
.dirent-list th.sortable:hover .sort-arrow { opacity: .4; }
.dirent-list th.sorted .sort-btn { color: var(--text); }
.dirent-list th.sorted .sort-arrow { opacity: 1; transform: none; color: #a5f3fc; }
.dirent-list th.sorted-desc .sort-arrow { transform: rotate(180deg); }

.dirent-list tbody tr { cursor: default; }
/* Row buttons are 28px; keep the cell padding small so the row stays at --row. */
@media (min-width: 961px) { .dirent-shell:not(.view-grid) .dirent-list tbody td { padding-top: 2px; padding-bottom: 2px; } }
.dirent-list tbody tr.selected > td:first-child { box-shadow: inset 3px 0 0 #a78bfa; }
.dirent-list tbody tr.is-cursor:not(.selected) > td:first-child { box-shadow: inset 2px 0 0 rgba(165, 243, 252, .55); }
.dirent-list tbody tr.menu-open { background: rgba(255, 255, 255, .045); }
.dirent-list tbody tr.is-pending { opacity: .4; pointer-events: none; transition: opacity .2s var(--ease); }

.dirent-list .item-name { gap: 10px; }
.dirent-list .item-visual { position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; }
.dirent-list .item-visual .item-icon { width: 20px; height: 20px; }
.dirent-list .item-thumb { display: none; }
.dirent-list .item-text { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; }
/* Badges (shared library, storage node) sit right after the name, not at the cell edge. */
.dirent-list .item-label { flex: 0 1 auto; }
.dirent-list .item-size { white-space: nowrap; text-overflow: ellipsis; }
.dirent-list .item-size .size-folder { color: var(--text-3); }
/* "Stored on the main server" is the normal case: keep its badge quiet; files on
   other storage nodes keep the full badge. */
.dirent-list .server-indicator.local { opacity: .35; transition: opacity .15s; }
.dirent-list tr:hover .server-indicator.local,
.dirent-list .server-indicator.local:focus-visible { opacity: .8; }
.dirent-list .rel-time { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dirent-list .star.star-pop { animation: bpStarPop .45s var(--spring); }

.dirent-list td.actions { padding-right: 10px; }
.dirent-list .row-ops { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.dirent-list .row-op { width: 28px; height: 28px; border-radius: 8px; }
.dirent-list .row-op .bi { width: 16px; height: 16px; }
.dirent-list .row-op[aria-expanded='true'] { color: var(--text); background: rgba(139, 92, 246, .22); }

/* Seafile shows the row actions on hover; touch screens always see them. */
@media (hover: hover) {
  .dirent-shell.view-list .row-op:not(.row-more) {
    opacity: 0; transform: translateX(6px);
    transition: opacity .16s var(--ease), transform .22s var(--ease), background-color .15s, color .15s;
  }
  .dirent-shell.view-list .row-op:nth-child(2) { transition-delay: 25ms; }
  .dirent-shell.view-list .row-op:nth-child(3) { transition-delay: 50ms; }
  .dirent-shell.view-list .row-more { opacity: .5; transition: opacity .16s var(--ease), background-color .15s, color .15s; }
  .dirent-shell.view-list tr:hover .row-op,
  .dirent-shell.view-list tr:focus-within .row-op,
  .dirent-shell.view-list tr.selected .row-op,
  .dirent-shell.view-list tr.is-cursor .row-op,
  .dirent-shell.view-list tr.menu-open .row-op { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------- inline rename */
.inline-rename { display: flex; align-items: center; gap: 12px; min-width: 0; }
.inline-rename .item-visual { flex: none; }
.inline-rename input[type=text] {
  flex: 1 1 auto; width: 100%; min-width: 0; height: 32px; padding: 0 10px; font-weight: 600;
  border-color: rgba(139, 92, 246, .7); box-shadow: var(--ring);
}
.inline-rename input[aria-invalid='true'] { border-color: rgba(248, 113, 113, .8); animation: shake .35s var(--ease); }
.inline-rename.is-saving input {
  opacity: .7;
  background-image: linear-gradient(90deg, transparent, rgba(139, 92, 246, .22), transparent);
  background-size: 200% 100%; animation: flow 1s linear infinite;
}
.dirent-list tr.just-renamed .item-label { animation: bpRenamed 1.1s var(--ease); }

/* --------------------------------------------------------------- grid view */
/* Same rows, laid out as tiles. Beats the phone card layout in app.css too. */
.dirent-shell.view-grid {
  overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dirent-shell.view-grid > .dirent-list { display: block; overflow: visible; background: transparent; border: 0; box-shadow: none; }
.dirent-shell.view-grid colgroup,
.dirent-shell.view-grid thead { display: none; }
.dirent-shell.view-grid tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
.dirent-shell.view-grid tbody tr {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: 7px 7px 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  transition: transform .25s var(--spring), border-color .15s, box-shadow .25s, background-color .15s;
}
.dirent-shell.view-grid tbody tr:hover {
  transform: translateY(-3px); border-color: var(--line-2); background: var(--panel);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .9), 0 0 0 1px rgba(139, 92, 246, .12);
}
.dirent-shell.view-grid tbody tr.selected,
.dirent-shell.view-grid tbody tr.selected:hover {
  border-color: rgba(167, 139, 250, .7);
  background: linear-gradient(180deg, rgba(139, 92, 246, .22), rgba(139, 92, 246, .07));
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .45), 0 18px 40px -22px rgba(139, 92, 246, .8);
}
.dirent-shell.view-grid tbody tr.is-cursor:not(.selected) { border-color: rgba(165, 243, 252, .45); }
.dirent-shell.view-grid tbody tr.drop-target { border-color: rgba(52, 211, 153, .7); background: rgba(52, 211, 153, .12); }
.dirent-shell.view-grid tbody tr > td,
.dirent-shell.view-grid tbody tr.selected > td:first-child { display: block; height: auto; padding: 0; border: 0; box-shadow: none; }
.dirent-shell.view-grid .favorite-col,
.dirent-shell.view-grid .item-size,
.dirent-shell.view-grid .item-modified,
.dirent-shell.view-grid .item-sharing,
.dirent-shell.view-grid .server-indicator { display: none !important; }
.dirent-shell.view-grid .select-col {
  position: absolute; z-index: 2; top: 12px; left: 12px; width: auto; padding: 0 !important;
  opacity: 0; transition: opacity .15s var(--ease);
}
.dirent-shell.view-grid td.actions { position: absolute; z-index: 2; top: 11px; right: 11px; padding: 0; }
.dirent-shell.view-grid .row-op:not(.row-more) { display: none; }
.dirent-shell.view-grid .row-more {
  width: 28px; height: 28px; opacity: 0; color: var(--text);
  background: rgba(8, 10, 18, .72); border-color: var(--line-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity .15s var(--ease), background-color .15s;
}
.dirent-shell.view-grid tr:hover .select-col,
.dirent-shell.view-grid tr:focus-within .select-col,
.dirent-shell.view-grid tr.selected .select-col,
.dirent-shell.view-grid tr:hover .row-more,
.dirent-shell.view-grid tr:focus-within .row-more,
.dirent-shell.view-grid tr.menu-open .row-more { opacity: 1; }
.dirent-shell.view-grid .name-cell { display: block; min-width: 0; }
.dirent-shell.view-grid .item-name { flex-direction: column; align-items: stretch; gap: 7px; }
.dirent-shell.view-grid .item-visual,
.dirent-shell.view-grid .inline-rename .item-visual {
  width: 100%; height: auto; aspect-ratio: 4 / 3; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .12), rgba(0, 0, 0, .25));
  border: 1px solid var(--line); border-radius: 9px;
}
.dirent-shell.view-grid .item-visual .item-icon { width: 44px; height: 44px; transition: transform .3s var(--spring), opacity .2s; }
.dirent-shell.view-grid a.item-name:hover .item-icon { transform: scale(1.08) rotate(-3deg); }
.dirent-shell.view-grid .item-thumb {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.dirent-shell.view-grid .item-visual.has-thumb .item-thumb { opacity: 1; }
.dirent-shell.view-grid .item-visual.has-thumb .item-icon { opacity: 0; }
.dirent-shell.view-grid tr:hover .item-thumb { transform: scale(1.04); }
.dirent-shell.view-grid .item-text { flex-direction: column; justify-content: center; gap: 3px; padding: 0 3px; text-align: center; }
/* Names get two lines (like Seafile's tiles) before they are cut short. */
.dirent-shell.view-grid .item-label {
  display: -webkit-box; flex: none; max-width: 100%; font-size: 12.5px; line-height: 1.3; text-align: center;
  white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
}
.dirent-shell.view-grid .inline-badge { font-size: 10px; }
.dirent-shell.view-grid .inline-rename { flex-direction: column; align-items: stretch; gap: 7px; }
.dirent-shell.view-grid .inline-rename input[type=text] { text-align: center; }

/* ------------------------------------------------------------- empty state */
.empty-state {
  display: grid; justify-items: center; gap: 8px; padding: 40px 20px 36px; text-align: center;
  background: var(--panel); border: 1px dashed var(--line-2); border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.empty-state-art {
  display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 4px; color: #c4b5fd;
  background: var(--grad-soft); border: 1px solid var(--line-2); border-radius: 20px;
  box-shadow: 0 18px 44px -22px rgba(139, 92, 246, .9);
}
.empty-state-art .bi { width: 32px; height: 32px; }
.empty-state h2 { font-size: 18px; }
.empty-state p { max-width: 440px; margin: 0; color: var(--text-2); }
.empty-state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* -------------------------------------------------------- drop-to-upload */
/* Hidden until files are dragged over the page (app.js adds .dragover). */
.drop-overlay {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 24px;
  pointer-events: none; opacity: 0; visibility: hidden;
  background: rgba(5, 6, 10, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: opacity .18s var(--ease), visibility 0s linear .18s;
}
.drop-overlay::before {
  content: ''; position: absolute; inset: 14px;
  border: 2px dashed rgba(34, 211, 238, .75); border-radius: 22px;
  box-shadow: inset 0 0 80px -20px rgba(139, 92, 246, .55);
}
.drop-overlay.dragover { opacity: 1; visibility: visible; transition: opacity .18s var(--ease), visibility 0s; }
.drop-overlay-card {
  position: relative; display: grid; justify-items: center; gap: 8px; max-width: 420px; padding: 30px 36px; text-align: center;
  color: var(--text-2); background: rgba(13, 16, 24, .92); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow); transform: translateY(12px) scale(.96); transition: transform .32s var(--spring);
}
.drop-overlay.dragover .drop-overlay-card { transform: none; }
.drop-overlay-card strong { color: var(--text); font: 600 21px var(--display); letter-spacing: -.01em; }
.drop-overlay-icon {
  display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 4px; color: #fff;
  background: var(--grad); border-radius: 18px; box-shadow: 0 16px 36px -14px rgba(139, 92, 246, 1);
}
.drop-overlay.dragover .drop-overlay-icon { animation: bpBob 1.3s ease-in-out infinite; }
.drop-overlay-icon .bi { width: 30px; height: 30px; }
.drop-overlay .drop-status:empty { display: none; }

/* ----------------------------------------------------------- details panel */
.details-panel {
  position: fixed; z-index: 75; top: calc(var(--top, 50px) + 10px); right: 16px; bottom: 14px;
  display: flex; flex-direction: column; width: min(360px, calc(100vw - 32px)); overflow: hidden;
  background: rgba(13, 16, 24, .94); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow), 0 0 0 1px rgba(139, 92, 246, .1);
  -webkit-backdrop-filter: blur(18px) saturate(130%); backdrop-filter: blur(18px) saturate(130%);
  animation: bpPanelIn .32s var(--ease) backwards;
}
.details-panel.is-closing { animation: bpPanelOut .2s var(--ease) forwards; }
/* Wide screens: the listing makes room for the panel; the secondary columns
   get narrower and only the "..." stays in the actions column. */
@media (min-width: 1240px) {
  body.details-open .browse-page { padding-right: 372px; transition: padding-right .3s var(--ease); }
  body.details-open .dirent-list .size-colgroup { width: 88px; }
  body.details-open .dirent-list .modified-colgroup { width: 118px; }
  body.details-open .dirent-list .sharing-colgroup { width: 104px; }
  body.details-open .dirent-list.has-domains .sharing-colgroup { width: 228px; }
  body.details-open .dirent-list .actions-colgroup { width: 52px; }
  body.details-open .dirent-shell.view-list .row-op:not(.row-more) { display: none; }
}
/* Details panel open on a not-so-wide screen: the per-row domain picker would squeeze the names
   away, so it steps aside until the panel closes (the toolbar picker and file page still have it). */
@media (min-width: 1240px) and (max-width: 1499px) {
  body.details-open .dirent-list .domain-row-form { display: none !important; }
  body.details-open .dirent-list.has-domains .sharing-colgroup { width: 104px; }
}
.details-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 16px; border-bottom: 1px solid var(--line); }
.details-title { color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.details-body { flex: 1 1 auto; min-height: 0; padding: 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
.details-body > * { animation: bpFadeUp .28s var(--ease) backwards; }
.details-body > :nth-child(2) { animation-delay: 30ms; }
.details-body > :nth-child(3) { animation-delay: 60ms; }
.details-body > :nth-child(n+4) { animation-delay: 90ms; }
.details-hero { display: grid; justify-items: center; gap: 4px; margin-bottom: 14px; text-align: center; }
.details-visual {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 8px; overflow: hidden;
  color: #c4b5fd; background: radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, .14), rgba(0, 0, 0, .28));
  border: 1px solid var(--line); border-radius: var(--r);
}
.details-visual .item-icon,
.details-visual > .bi { width: 64px; height: 64px; }
.details-visual .details-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.details-visual.has-thumb .item-icon { visibility: hidden; }
.details-name { max-width: 100%; font-size: 17px; overflow-wrap: anywhere; }
.details-type { margin: 0; color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.details-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; }
.details-actions .btn { min-height: 32px; padding: 0 11px; gap: 7px; font-size: 12.5px; }
.details-list { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px 12px; margin: 0 0 18px; font-size: 13px; }
.details-list dt { padding-top: 2px; color: var(--text-3); font: 600 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.details-list dd { min-width: 0; margin: 0; color: var(--text); overflow-wrap: anywhere; }
.details-time { display: grid; gap: 1px; }
.details-time small, .details-versions small, .details-people small { color: var(--text-3); font-size: 11.5px; }
.details-versions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.details-inline-link, .details-location { color: #a5b4fc; }
.details-section {
  margin: 0 0 12px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase;
}
.details-link { display: flex; gap: 6px; min-width: 0; }
.details-link .linkbox { flex: 1 1 auto; width: auto; min-width: 0; height: 32px; padding: 0 9px; font-size: 12px; }
.details-link .btn { min-height: 32px; padding: 0 10px; font-size: 12px; }
.details-people { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.details-people li { display: flex; justify-content: space-between; gap: 8px; }
.details-person { font-weight: 600; }
.details-note { margin: 0; color: var(--text-3); font-size: 12.5px; }
.details-loading { display: grid; gap: 10px; }
.details-skeleton {
  display: block; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
  background-size: 200% 100%; animation: flow 1.2s linear infinite;
}
.details-skeleton.wide { height: 150px; border-radius: var(--r); }
.details-skeleton:last-child { width: 60%; }

/* ------------------------------------------------- menus, toasts (extras) */
.context-menu button { display: flex; align-items: center; gap: 10px; }
.context-menu button .bi { color: var(--text-3); transition: color .12s; }
.context-menu button:hover .bi, .context-menu button:focus-visible .bi { color: #c4b5fd; }
.context-menu button.danger .bi { color: inherit; }
.context-menu .context-text { flex: 1 1 auto; }
.context-kbd {
  margin-left: 12px; padding: 1px 6px; color: var(--text-3);
  border: 1px solid var(--line-2); border-radius: 6px; font: 500 10.5px var(--mono);
}
.context-label { padding: 6px 10px 4px; color: var(--text-3); font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; }

.toast.toast-success { border-color: rgba(52, 211, 153, .32); }
.toast.toast-success::before { background-color: rgba(52, 211, 153, .16); background-image: var(--bi-toast-ok); }
.toast.toast-error { border-color: rgba(248, 113, 113, .38); }
.toast.toast-error::before { background-color: rgba(248, 113, 113, .16); background-image: var(--bi-toast-err); }

/* ------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  /* app.css turns list rows into cards here; give the actions their own line spacing. */
  .dirent-shell.view-list .row-ops { flex-wrap: nowrap; }
  .dirent-shell.view-grid tbody tr { padding: 7px 7px 8px; }
  .dirent-shell.view-grid tbody { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
}
@media (max-width: 640px) {
  .browse-toolbar .toolbar-view { width: 100%; margin-left: 0; justify-content: flex-end; }
  .browse-crumbs .crumb-link, .browse-crumbs .crumb-current { max-width: 160px; }
  .dirent-shell.view-grid tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .selection-actions .btn span:not(.bi) { display: none; }
  .selection-actions .btn { width: 34px; padding: 0; }
  .details-panel { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 72vh; }
  .drop-overlay-card { padding: 24px; }
}
@media (hover: none) {
  .dirent-shell.view-grid .select-col,
  .dirent-shell.view-grid .row-more { opacity: 1; }
}

/* ----------------------------------------------------------------- motion */
@keyframes bpPanelIn { from { opacity: 0; transform: translateX(24px); } }
@keyframes bpPanelOut { to { opacity: 0; transform: translateX(24px); } }
@keyframes bpFadeUp { from { opacity: 0; transform: translateY(6px); } }
@keyframes bpBarIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
@keyframes bpTileIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes bpRowIn { from { opacity: 0; transform: translateY(5px); } }
@keyframes bpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bpStarPop { 0% { transform: scale(1); } 40% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }
@keyframes bpRenamed { 0% { color: #a5f3fc; text-shadow: 0 0 14px rgba(34, 211, 238, .7); } 100% { color: inherit; text-shadow: none; } }
@keyframes bpFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }

.browse-bar.has-selection .selection-bar { animation: bpBarIn .22s var(--ease) backwards; }
.empty-state-art { animation: bpFloat 5s ease-in-out infinite; }
.dirent-list.just-sorted tbody tr { animation: bpRowIn .3s var(--ease) backwards; }
.dirent-list.just-sorted tbody tr:nth-child(2) { animation-delay: 18ms; }
.dirent-list.just-sorted tbody tr:nth-child(3) { animation-delay: 36ms; }
.dirent-list.just-sorted tbody tr:nth-child(4) { animation-delay: 54ms; }
.dirent-list.just-sorted tbody tr:nth-child(5) { animation-delay: 72ms; }
.dirent-list.just-sorted tbody tr:nth-child(6) { animation-delay: 90ms; }
.dirent-list.just-sorted tbody tr:nth-child(n+7) { animation-delay: 108ms; }
.dirent-shell.view-switched tbody tr { animation: bpTileIn .3s var(--ease) backwards; }
.dirent-shell.view-switched tbody tr:nth-child(2) { animation-delay: 20ms; }
.dirent-shell.view-switched tbody tr:nth-child(3) { animation-delay: 40ms; }
.dirent-shell.view-switched tbody tr:nth-child(4) { animation-delay: 60ms; }
.dirent-shell.view-switched tbody tr:nth-child(5) { animation-delay: 80ms; }
.dirent-shell.view-switched tbody tr:nth-child(6) { animation-delay: 100ms; }
.dirent-shell.view-switched tbody tr:nth-child(n+7) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  .details-panel, .details-panel.is-closing, .details-body > *,
  .browse-bar.has-selection .selection-bar, .empty-state-art,
  .dirent-list.just-sorted tbody tr, .dirent-shell.view-switched tbody tr,
  .drop-overlay.dragover .drop-overlay-icon, .dirent-list .star.star-pop,
  .dirent-list tr.just-renamed .item-label, .inline-rename input, .details-skeleton { animation: none !important; }
  .drop-overlay, .drop-overlay-card, .dirent-shell.view-grid tbody tr, .dirent-shell.view-grid .item-thumb,
  .dirent-shell.view-grid .item-visual .item-icon, .dirent-list .row-op, .dirent-list .sort-arrow,
  body.details-open .browse-page { transition: none !important; }
  .dirent-shell.view-grid tbody tr:hover, .dirent-shell.view-grid tr:hover .item-thumb,
  .dirent-shell.view-grid a.item-name:hover .item-icon, .drop-overlay-card { transform: none !important; }
}