/* neur0doku-navbar.css — shared top bar + map bubble / slide-out panel (Threadmap now, Café in Phase 3).
   One size knob: --nd-navbar-size. 360px -> 15.8px, 393 -> 17.3, 430 -> 18.9. Everything inside is em.
   LOAD AFTER neur0doku-components.css and neur0doku-pages.css. */
:root { --nd-navbar-size: clamp(14px, 4.4vw, 22px); }

.nd-navbar {
  position: relative;
  z-index: 6;
  flex-shrink: 0;
  font-size: var(--nd-navbar-size);
  padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1.25rem 0.4em;
  box-sizing: border-box;
}
.nd-navbar-row { display: flex; align-items: center; gap: 0.5em; }
.nd-navbar-left { display: flex; align-items: center; gap: 0.5em; flex-shrink: 0; }
.nd-navbar-slot { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; }

.nd-navbar .nd-icon-btn {
  font-size: inherit;
  flex-shrink: 0;
  width: 2.8em;
  height: 2.8em;
  border-radius: 0.85em;
  padding: 0;
}
.nd-navbar .nd-icon-btn img { width: 80%; height: 80%; object-fit: contain; }

.nd-navbar .nd-icon-badge {
  top: -0.5em; right: -0.5em;
  min-width: 1.75em; height: 1.75em;
  padding: 0 0.5em;
  font-size: 0.6em; line-height: 1.75em;
  box-sizing: border-box;
}
.nd-navbar .nd-thread-chip { font-size: 0.85em; gap: 0.41em; padding: 0.47em 0.82em; }
.nd-navbar .nd-thread-icon { font-size: 1.12em; }

.nd-navbar .nd-threadmap-scene-label {
  font-size: 0.85em;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- map bubble + slide-out panel ----------
   CLOSED: just the map bubble, directly under the avatar (same left edge, a small gap below the bar).
   OPEN:   the bubble slides left to the screen edge while the card grows to the right behind it. */
.nd-navpanel { position: absolute; top: 100%; left: 0; z-index: 7; margin-top: 0.5em; }
.nd-navpanel-card {
  box-sizing: border-box;
  width: calc(1.25rem + 3.3em);
  padding: 0.25em 0.5em 0.25em 1.25rem;       /* closed: bubble lines up with the avatar above */
  overflow: hidden;
  background: transparent;
  border: 1px solid transparent;
  border-left: none;
  border-radius: 0 1.1em 1.1em 0;
  box-shadow: none;
  pointer-events: none;                        /* closed: the empty part never blocks the map */
  transition: width 0.24s ease, padding 0.24s ease, background-color 0.24s ease,
              border-color 0.24s ease, box-shadow 0.24s ease;
}
.nd-navpanel-map { pointer-events: auto; }
.nd-navpanel[data-open="true"] .nd-navpanel-card {
  width: min(14.5em, calc(100vw - 7em));
  padding-left: max(0.4em, env(safe-area-inset-left, 0px));
  background: var(--nd-surface);
  border-color: var(--nd-border);
  box-shadow: 0 4px 12px var(--nd-shadow);
  pointer-events: auto;
}

.nd-navpanel-top { display: flex; align-items: flex-start; gap: 0.3em; }
.nd-navpanel[data-open="true"] .nd-navpanel-map { background: var(--nd-button-bg); border-color: var(--nd-button-border); }
.nd-navpanel-map:focus-visible,
.nd-navpanel-extra:focus-visible,
.nd-navpanel-item:focus-visible { outline: 2px solid var(--nd-focus); outline-offset: 2px; }

.nd-navpanel-extras { display: flex; gap: 0.2em; margin-left: auto; }
.nd-navpanel-extra {
  display: flex; flex-direction: column; align-items: center; gap: 0.1em;
  min-width: 3.2em; padding: 0.25em 0.2em;
  border: none; background: none; border-radius: 0.6em;
  color: var(--nd-text-soft);
  font: inherit; font-size: 0.66em; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.nd-navpanel-extra img { width: 3em; height: 3em; object-fit: contain; }

.nd-navpanel-body { display: none; }
.nd-navpanel[data-open="true"] .nd-navpanel-body { display: block; }

.nd-navpanel-list { list-style: none; margin: 0.3em 0 0; padding: 0; }
.nd-navpanel-item {
  display: flex; align-items: center; gap: 0.7em;
  min-height: 2.9em; padding: 0 0.6em;
  border-radius: 0.8em;
  color: var(--nd-text);
  font-family: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700; font-size: 1.05em;
  white-space: nowrap;
  text-decoration: none;
}
.nd-navpanel-item:hover { background: var(--nd-surface-soft); text-decoration: none; }
.nd-navpanel-item img { width: 2em; height: 2em; object-fit: contain; flex-shrink: 0; }
.nd-navpanel-divider { height: 1px; margin: 0.3em 0.6em; background: var(--nd-border); }

@media (prefers-reduced-motion: reduce) { .nd-navpanel-card { transition: none; } }