/* ---------------------------------------------------------------------------
   topbar.css — Top bar: breadcrumb, search box + scope toggle, auth button,
   upload button badge, login modal error text.
   --------------------------------------------------------------------------- */

.app {
  display: flex;
  flex-direction: column;
  /* See base.css's body rule for why 100dvh is intentionally not used
     (or no longer overrides 100vh) here. */
  height: 100vh;
  overflow: hidden;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  padding-top: calc(12px + var(--safe-top, 0px));
  background: #1a1a1d;
  border-bottom: 1px solid #2a2a2e;
  flex-shrink: 0;
}
.path-breadcrumb {
  font-size: 13px;
  color: #a8a8ae;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  white-space: nowrap;
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  /* Hide the scrollbar itself (still scrollable via touch/wheel/drag) so a
     long, deep path doesn't grow a visible horizontal scrollbar under the
     pill trail — the fade mask below already signals overflow instead. */
  scrollbar-width: none;
  /* Fades the trail's leading edge to a soft edge rather than a hard clip
     when it overflows and has been scrolled, echoing the rounded/soft
     language of the pills themselves instead of a plain cut-off. */
  mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
}
.path-breadcrumb::-webkit-scrollbar { display: none; }
.crumb-item { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.crumb-sep {
  color: #4a4a50;
  margin: 0 2px;
  flex-shrink: 0;
}
.crumb-label {
  cursor: pointer;
  color: #a8a8ae;
  padding: 4px 9px;
  border-radius: 6px;
  transition: background-color 0.12s ease, color 0.12s ease;
}
@media (hover: hover) {
  .crumb-label:hover { background: #232326; color: #e8e8ea; }
}
/* The last crumb (current folder) reads as the destination, not a link:
   a filled pill in the app's accent, matching how .search-scope-btn.active
   and other "this is the active state" chips already look elsewhere in the
   topbar, rather than the plain underline links every other crumb uses. */
.crumb-item-current .crumb-label {
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  color: color-mix(in srgb, var(--accent-color) 82%, white);
  font-weight: 600;
  cursor: default;
}
@media (hover: hover) {
  .crumb-item-current .crumb-label:hover { background: color-mix(in srgb, var(--accent-color) 16%, transparent); }
}
.crumb-current {
  color: color-mix(in srgb, var(--accent-color) 82%, white);
  font-weight: 600;
  padding: 4px 9px;
}
.crumb-play-btn {
  background: none;
  border: none;
  color: color-mix(in srgb, var(--accent-color) 82%, white);
  cursor: pointer;
  opacity: 0.75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 1px;
  border-radius: 5px;
  flex-shrink: 0;
}
/* SVG width/height HTML attributes are presentation attributes - Chrome
   treats them as the lowest-priority CSS declarations, so any stylesheet
   rule (even a generic one elsewhere) can silently override them. Sizing
   it here in CSS instead removes that ambiguity - this is the one place
   controlling this SVG's size. viewBox="6 4 14 16" (browse.js) is the
   polygon's exact bounding box with no padding, so the 11.375x13 here
   (matching that 14:16 ratio) makes the polygon fill this box exactly,
   with no preserveAspectRatio letterboxing on either axis. */
.crumb-play-btn svg { width: 11.375px; height: 13px; }
@media (hover: hover) { .crumb-play-btn:hover { opacity: 1; background: color-mix(in srgb, var(--accent-color) 22%, transparent); } }
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 16px;
}
.search-input {
  width: 220px;
  padding: 6px 28px 6px 10px;
  font-size: 13px;
}
.search-clear {
  position: absolute;
  right: 6px;
  background: none;
  border: none;
  color: #a8a8ae;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
}
@media (hover: hover) { .search-clear:hover { background: #35353a; color: #e8e8ea; } }
.search-clear.hidden { display: none; }
.search-scope-btn {
  margin-right: 6px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #232326;
  border: 1px solid #35353a;
  color: #a8a8ae;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
}
@media (hover: hover) { .search-scope-btn:hover { background: #2a2a2e; color: #e8e8ea; } }
.search-scope-btn.active {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #12121e;
}
.topbar-actions {
  display: flex;
  align-items: center;
}
.topbar-actions button {
  background: #2a2a2e;
  border: none;
  color: #e8e8ea;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  margin-left: 8px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (hover: hover) { .topbar-actions button:hover { background: #35353a; } }
#authBtn.logged-in { background: color-mix(in srgb, var(--accent-color) 18%, transparent); color: color-mix(in srgb, var(--accent-color) 70%, white); }
@media (hover: hover) { #authBtn.logged-in:hover { background: color-mix(in srgb, var(--accent-color) 28%, transparent); } }
.login-error {
  color: #ff8080;
  font-size: 12px;
  margin: -4px 0 8px;
}
.login-error.hidden { display: none; }
.login-title { text-align: center; font-weight: 600; margin-bottom: 8px; }
.upload-wrap { position: relative; display: inline-block; }
#uploadBtn.uploading {
  background: var(--accent-color);
  color: #12121e;
  font-weight: 700;
  animation: upload-pulse 1.4s ease-in-out infinite;
}
@keyframes upload-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 50%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-color) 0%, transparent); }
}