/* BudunOS header live dropdowns (requests / messages / notifications)
 * Body: bos-header-dd-v-{id}
 * Panel: .bos-header-dd.bos-header-dd--{id}
 */

/* ========== soft (identity) ========== */
body.bos-header-dd-v-soft .main-header .bos-header-dd {
  /* default sidebar.css soft widget */
}

/* ========== glass ========== */
body.bos-header-dd-v-glass .main-header .bos-header-dd.bos-header-dd--glass {
  border-color: rgba(255, 255, 255, 0.85) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)) !important;
  box-shadow:
    0 18px 48px rgba(15, 23, 42, 0.16),
    0 0 0 1px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(36px) saturate(1.45);
  -webkit-backdrop-filter: blur(36px) saturate(1.45);
  isolation: isolate;
}

body.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-head,
body.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-foot {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
}

body.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-list .data-container:hover,
body.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-list > li > a:hover,
body.bos-header-dd-v-glass .main-header .bos-header-dd--glass .feeds-item.unread .data-container {
  background: rgba(255, 255, 255, 0.62) !important;
}

body.night-mode.bos-header-dd-v-glass .main-header .bos-header-dd.bos-header-dd--glass,
html[data-bs-theme="dark"].bos-header-dd-v-glass .main-header .bos-header-dd.bos-header-dd--glass {
  background:
    linear-gradient(180deg, rgba(38, 45, 52, 0.94), rgba(30, 37, 43, 0.9)) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

body.night-mode.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-head,
body.night-mode.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-foot,
html[data-bs-theme="dark"].bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-head,
html[data-bs-theme="dark"].bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-foot {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.night-mode.bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-list .data-container:hover,
html[data-bs-theme="dark"].bos-header-dd-v-glass .main-header .bos-header-dd--glass .bos-header-dd-list .data-container:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ========== ink ========== */
body.bos-header-dd-v-ink .main-header .bos-header-dd.bos-header-dd--ink {
  background:
    radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--link-color) 22%, transparent), transparent 55%),
    #0f1419 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #e8eaed !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45) !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-head,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-foot {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-head .title,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-foot,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list .name,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty strong {
  color: #f0f3f6 !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-action,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-sound,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list .text,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list .data-content > div:last-child,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list .time,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty {
  color: #8b949e !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-action:hover {
  color: #fff !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list .data-container:hover,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-list > li > a:hover,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .feeds-item.unread .data-container {
  background: color-mix(in srgb, var(--link-color) 18%, transparent) !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty-ico,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty .main-icon,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty .svg-container,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty svg,
body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .bos-header-dd-empty svg * {
  color: #fff !important;
  stroke: #fff !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .btn-light {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #f0f3f6 !important;
}

body.bos-header-dd-v-ink .main-header .bos-header-dd--ink .btn-primary {
  background: #fff !important;
  border-color: #fff !important;
  color: #0f1419 !important;
}

/* ========== compact ========== */
body.bos-header-dd-v-compact .main-header .bos-header-dd.bos-header-dd--compact {
  border-radius: 12px !important;
  margin-top: 6px !important;
}

@media (min-width: 768px) {
  body.bos-header-dd-v-compact .main-header .bos-header-dd.bos-header-dd--compact {
    min-width: 320px !important;
  }
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-head {
  padding: 8px 10px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-head .title {
  font-size: 12px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-action,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-sound {
  font-size: 11px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-body {
  padding: 6px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-body .js_scroller {
  max-height: 240px;
  height: 240px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list {
  gap: 2px;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .data-container,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list > li > a {
  padding: 6px 8px !important;
  border-radius: 8px !important;
  gap: 8px;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .data-avatar,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .data-avatar img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .name {
  font-size: 12px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .text,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-list .data-content > div:last-child {
  font-size: 11px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-foot {
  padding: 8px 10px !important;
  font-size: 12px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .bos-header-dd-empty {
  padding: 18px 10px !important;
}

body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .btn-sm,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .btn.btn-primary,
body.bos-header-dd-v-compact .main-header .bos-header-dd--compact .btn.btn-light {
  min-height: 28px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}

/* ========== bubble ========== */
body.bos-header-dd-v-bubble .main-header .bos-header-dd.bos-header-dd--bubble {
  border-radius: 20px !important;
  padding: 0 !important;
  overflow: hidden;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-head {
  padding: 12px 14px !important;
  background: color-mix(in srgb, var(--link-color) 8%, #fff) !important;
  border-bottom-color: transparent !important;
}

body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-head,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-head {
  background: color-mix(in srgb, var(--link-color) 16%, transparent) !important;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-body {
  padding: 8px 10px 10px !important;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list {
  gap: 6px;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list > li > a {
  padding: 8px 10px !important;
  border-radius: 14px !important;
  background: #f6f7f9;
}

body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container,
body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list > li > a,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list > li > a {
  background: rgba(255, 255, 255, 0.04);
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container:hover,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list > li > a:hover,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .feeds-item.unread .data-container {
  background: color-mix(in srgb, var(--link-color) 12%, #fff) !important;
}

body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container:hover,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-container:hover {
  background: color-mix(in srgb, var(--link-color) 22%, transparent) !important;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-avatar,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-list .data-avatar img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-foot {
  border-radius: 0 0 20px 20px;
  background: color-mix(in srgb, var(--link-color) 6%, #fff) !important;
  border-top-color: transparent !important;
  font-weight: 700 !important;
}

body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-foot,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-foot {
  background: color-mix(in srgb, var(--link-color) 14%, transparent) !important;
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-empty {
  border-radius: 14px;
  background: #f6f7f9;
  margin: 4px 0;
}

body.night-mode.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-empty,
html[data-bs-theme="dark"].bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .bos-header-dd-empty {
  background: rgba(255, 255, 255, 0.04);
}

body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .btn-sm,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .btn.btn-primary,
body.bos-header-dd-v-bubble .main-header .bos-header-dd--bubble .btn.btn-light {
  border-radius: 999px !important;
}