/* BudunOS mobile footbar variants
 * Body: bos-footbar-v-{id}
 * Bar: .bos-fbar.bos-fbar--{id}
 */

/* ---------- soft — identity (current) ---------- */
body.bos-footbar-v-soft .bos-fbar {
  /* default sidebar.css soft styles */
}

/* ---------- Floating dock — iOS pill ---------- */
body.bos-footbar-v-dock .bos-fbar.footer-bottom-bar {
  left: 12px !important;
  right: 12px !important;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important;
  height: 62px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  overflow: visible;
}

body.night-mode.bos-footbar-v-dock .bos-fbar.footer-bottom-bar,
html[data-bs-theme="dark"].bos-footbar-v-dock .bos-fbar.footer-bottom-bar {
  background: rgba(30, 37, 43, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.bos-footbar-v-dock .bos-fbar .bos-fbar-links,
body.bos-footbar-v-dock .bos-fbar .bos-fbar-links > .link {
  height: 62px;
}

body.bos-footbar-v-dock .bos-fbar .bos-fbar-sheet.dropdown-widget {
  bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 24px) !important;
  inset: auto 12px calc(62px + env(safe-area-inset-bottom, 0px) + 24px) 12px !important;
}

/* ---------- Ink dock — charcoal ---------- */
body.bos-footbar-v-ink .bos-fbar.footer-bottom-bar {
  background: #0f1419 !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-links > .link > a,
body.bos-footbar-v-ink .bos-fbar .user-menu,
body.bos-footbar-v-ink .bos-fbar .bos-fbar-links .link > a > .title,
body.bos-footbar-v-ink .bos-fbar .user-menu .title,
body.bos-footbar-v-ink .bos-fbar .bos-fbar-add-btn .title {
  color: #8b949e !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-ico {
  color: #fff !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-ico svg {
  stroke: #fff !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-links > .link.active > a,
body.bos-footbar-v-ink .bos-fbar .bos-fbar-links > .link.active > a > .title,
body.bos-footbar-v-ink .bos-fbar .bos-fbar-links > .link.active .bos-fbar-ico {
  color: #fff !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add {
  background: color-mix(in srgb, var(--link-color) 78%, #0f1419) !important;
  color: #fff !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--link-color) 40%, transparent),
    0 12px 28px color-mix(in srgb, var(--link-color) 35%, transparent) !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add svg {
  stroke: #fff !important;
}

body.bos-footbar-v-ink .bos-fbar .user-menu img {
  border-color: rgba(255, 255, 255, 0.18);
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-sheet.dropdown-widget {
  background: #161b22 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-sheet-head {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-sheet-head strong {
  color: #f0f3f6;
}

body.bos-footbar-v-ink .bos-fbar .bos-fbar-grid .add-quick-item {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #e8eaed !important;
}

/* ---------- Active bubbles ---------- */
body.bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link > a {
  border-radius: 14px !important;
  margin: 8px 4px !important;
  height: calc(100% - 16px) !important;
  padding: 4px 6px !important;
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link.active > a {
  background: color-mix(in srgb, var(--link-color) 12%, #fff) !important;
  color: var(--link-color) !important;
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link.active .bos-fbar-ico,
body.bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link.active > a > .title {
  color: var(--link-color) !important;
}

body.night-mode.bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link.active > a,
html[data-bs-theme="dark"].bos-footbar-v-bubble .bos-fbar .bos-fbar-links > .link.active > a {
  background: color-mix(in srgb, var(--link-color) 22%, transparent) !important;
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-add > a.bos-fbar-add-btn {
  top: -14px;
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add {
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  background: var(--link-color) !important;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--link-color) 40%, transparent);
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-add-btn:hover .bos-fbar-ico--add,
body.bos-footbar-v-bubble .bos-fbar .bos-fbar-add-btn:focus .bos-fbar-ico--add {
  background: color-mix(in srgb, var(--link-color) 85%, #000) !important;
}

body.bos-footbar-v-bubble .bos-fbar .bos-fbar-add-btn .title {
  display: none;
}

/* ---------- Icon line — minimal ---------- */
body.bos-footbar-v-line .bos-fbar.footer-bottom-bar {
  height: 56px;
  background: #fff !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 -1px 0 #e9ebef;
}

body.night-mode.bos-footbar-v-line .bos-fbar.footer-bottom-bar,
html[data-bs-theme="dark"].bos-footbar-v-line .bos-fbar.footer-bottom-bar {
  background: var(--card-dark-color, #262d34) !important;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08);
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-links,
body.bos-footbar-v-line .bos-fbar .bos-fbar-links > .link {
  height: 56px;
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-links .link > a > .title,
body.bos-footbar-v-line .bos-fbar .user-menu .title,
body.bos-footbar-v-line .bos-fbar .bos-fbar-add-btn .title {
  display: none !important;
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-links > .link > a,
body.bos-footbar-v-line .bos-fbar .user-menu {
  position: relative;
  padding: 0 !important;
  gap: 0;
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-links > .link.active > a::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: 999px;
  background: var(--link-color);
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-add > a.bos-fbar-add-btn {
  top: 0;
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add {
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px;
  background: color-mix(in srgb, var(--link-color) 14%, #fff);
  color: var(--link-color) !important;
  box-shadow: none;
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add svg {
  stroke: var(--link-color) !important;
}

body.night-mode.bos-footbar-v-line .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add,
html[data-bs-theme="dark"].bos-footbar-v-line .bos-fbar .bos-fbar-add-btn .bos-fbar-ico--add {
  background: color-mix(in srgb, var(--link-color) 22%, transparent);
}

body.bos-footbar-v-line .bos-fbar .bos-fbar-sheet.dropdown-widget {
  bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 10px) !important;
  inset: auto 12px calc(56px + env(safe-area-inset-bottom, 0px) + 10px) 12px !important;
}