/* KD dropdown + optional Back — used on browser and app-shell. */
.app-nav { display: flex; align-items: center; gap: 6px; margin-right: 8px; flex: 0 0 auto; }
.app-nav-back, .app-nav-kd-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; min-width: 36px;
  padding: 4px 10px; border-radius: 10px; border: 1px solid rgba(255,255,255,.55);
  background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer;
  transition: padding .18s ease, min-height .18s ease;
}
.app-nav-back { font-size: 26px; line-height: 1; padding: 0 12px; }
.app-nav-back[hidden] { display: none !important; }
/* Back is app-shell only; browser uses browser chrome / history. */
body:not(.app-shell) .app-nav-back { display: none !important; }
.app-nav-kd { position: relative; }
.app-nav-kd-logo { border-radius: 6px; width: 22px; height: 22px; }
.app-nav-kd-text { letter-spacing: .02em; }
.app-nav-panel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 1200; min-width: 240px;
  background: var(--card-bg, #fff); color: var(--text, #111);
  border: 1px solid rgba(128,128,128,.35); border-radius: 12px; padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  text-align: left;
}
.app-nav-panel[hidden] { display: none; }
.app-nav-panel .kd-menu-label {
  display: block;
  margin: 6px 4px 0;
  padding: 8px 8px 2px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #c2410c;
  pointer-events: none;
  user-select: none;
}
.app-nav-panel a {
  display: flex; justify-content: flex-start; align-items: center; gap: 6px;
  padding: 8px 10px; border-radius: 8px; color: inherit; text-decoration: none; font-weight: 600;
  width: 100%; box-sizing: border-box; white-space: nowrap;
}
.app-nav-panel button.lc-locked {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; color: inherit; font-weight: 600;
  width: 100%; background: transparent; border: 0; font: inherit; cursor: pointer; text-align: left;
  box-sizing: border-box;
}
.app-nav-panel a:active, .app-nav-panel a:hover,
.app-nav-panel button.lc-locked:hover { background: rgba(128,128,128,.15); }
/* Live Chat label + green "N active" sit on one tight row (not space-between). */
.app-nav-panel .kd-active {
  color: #16a34a; font-weight: 700; font-size: .88em;
  margin-left: 2px; flex: 0 0 auto;
}
.kd-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; display: inline-block; margin-left: 4px; }
body.app-shell header .container { display: flex; align-items: center; }

/* KD dropdown already carries the brand. Hide the second logo + "KartDen"
   wordmark; keep only the section crumb (Videos / Forum / Chat). */
header .site-title {
  display: none !important;
}

/* Keep the header on one row so the chip can be measured / hidden if needed.
   Do NOT use overflow:hidden here — it clips the KD / notif / user dropdowns
   (position:absolute panels below the bar). fitHeaderAd hides the chip instead. */
header[data-site-header] > .container {
  flex-wrap: nowrap;
  overflow: visible;
}
header[data-site-header] > .container > nav {
  flex-wrap: nowrap;
  min-width: 0;
  overflow: visible;
}
/* JS sets this when KD + chip + bell + username would wrap. */
.kb-ad-header.kb-ad-header-nofit {
  display: none !important;
}

/* Compact sticky header: shrink KD control with the bar (match bell / profile height). */
header.header--compact .app-nav-kd-btn,
header.header--compact .app-nav-back {
  min-height: 22px; min-width: 22px; padding: 1px 6px;
}
header.header--compact .app-nav-kd-logo { width: 16px; height: 16px; }
header.header--compact .app-nav-kd-text { font-size: 0.9rem; }
header.header--compact .app-nav-back { font-size: 20px; padding: 0 6px; }