/* ===== Menu bar ===== */
.menubar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--menubar-h); z-index: 3000;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px; font-size: 13.5px; color: #fff;
  border-radius: 0; border: none;
  --glass-blur: 20px;
  box-shadow: 0 0.5px 0 rgba(255,255,255,.06), 0 1px 12px rgba(0,0,0,.10);
}
.menubar.glass { background: linear-gradient(to bottom, rgba(0,0,0,.16), rgba(0,0,0,.04)); }
:root[data-theme="light"] .menubar { color: #fff; }
/* When a light wallpaper region is under the bar the text stays white with shadow */
.menubar-left, .menubar-right { display: flex; align-items: center; height: 100%; }
.menubar-left { gap: 1px; }
.menubar-right { gap: 3px; }
.menu-item {
  height: 22px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 400; color: inherit; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.menu-item strong { font-weight: 600; }
.menu-apple { padding: 0 9px; }
.menu-item.active, .menu-item:hover { background: rgba(255,255,255,.22); text-shadow: none; }
.menu-status {
  height: 22px; padding: 0 7px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.28); font-size: 13px; font-variant-numeric: tabular-nums;
}
.menu-status:hover, .menu-status.active { background: rgba(255,255,255,.22); text-shadow: none; }
.menu-clock { font-weight: 400; }
.battery { width: 25px; height: 12px; border: 1px solid rgba(255,255,255,.75); border-radius: 3px; position: relative; display: inline-block; padding: 1.5px; }
.battery::after { content:""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; background: rgba(255,255,255,.75); border-radius: 0 2px 2px 0; }
.battery-fill { display: block; height: 100%; background: #fff; border-radius: 1px; }

/* Dropdown menus from the menu bar */
.dropdown {
  position: absolute; top: calc(var(--menubar-h) - 2px); min-width: 220px; padding: 5px; border-radius: 12px;
  z-index: 3200; font-size: 13.5px; color: var(--glass-text); animation: ctxpop .12s var(--ease-out);
}
.dropdown .di { display: flex; align-items: center; gap: 10px; padding: 5px 11px 5px 24px; border-radius: 7px; position: relative; white-space: nowrap; }
.dropdown .di:hover:not(.disabled) { background: var(--accent); color: #fff; }
.dropdown .di:hover:not(.disabled) .di-key { color: rgba(255,255,255,.85); }
.dropdown .di.disabled { opacity: .32; }
.dropdown .di .di-key { margin-left: auto; opacity: .5; font-size: 12.5px; padding-left: 26px; }
.dropdown .di .di-check { position: absolute; left: 8px; }
.dropdown .sep { height: 1px; background: var(--hairline); margin: 5px 6px; }

/* ===== Dock ===== */
.dock-wrap {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2900;
  display: flex; justify-content: center; pointer-events: none;
}
.dock {
  pointer-events: auto;
  display: flex; align-items: flex-end; gap: 6px;
  padding: 7px 8px; border-radius: 26px;
  --glass-blur: 26px;
  height: calc(var(--dock-icon) + 14px);
}
.dock-item {
  position: relative; width: var(--dock-icon); height: var(--dock-icon);
  display: flex; align-items: flex-end; justify-content: center;
  transition: width .18s var(--ease-out), height .18s var(--ease-out), margin .18s var(--ease-out);
  transform-origin: bottom center;
}
.dock-item .icon { width: 100%; height: 100%; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); transition: transform .12s; }
.dock-item:active .icon { transform: translateY(2px) scale(.94); }
.dock-item .dot { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .2s; }
:root[data-theme="dark"] .dock-item .dot { background: rgba(255,255,255,.7); }
.dock-item.running .dot { opacity: 1; }
.dock-item .tip {
  position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(6px);
  padding: 4px 11px; border-radius: 8px; font-size: 12.5px; white-space: nowrap; color: var(--glass-text);
  opacity: 0; pointer-events: none; transition: opacity .14s, transform .14s;
}
.dock-item:hover .tip { opacity: 1; transform: translateX(-50%) translateY(0); }
.dock-sep { width: 1px; height: var(--dock-icon); margin: 0 4px; background: rgba(255,255,255,.28); align-self: center; }
:root[data-theme="dark"] .dock-sep { background: rgba(255,255,255,.16); }

/* bounce for launching */
@keyframes dockbounce { 0%,100%{ transform: translateY(0);} 40%{ transform: translateY(-24px);} 70%{ transform: translateY(-6px);} }
.dock-item.bounce { animation: dockbounce .6s ease 2; }