/* ===================== Bottom panel ===================== */
#panel {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--panel-h);
  background: var(--panel-bg); color: var(--panel-fg);
  display: flex; align-items: stretch; z-index: 6000;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}

#menu-button {
  display: flex; align-items: center; gap: 7px; padding: 0 12px 0 10px;
  background: transparent; border: none; color: var(--panel-fg); font-size: 13.5px;
}
#menu-button img { width: 22px; height: 22px; }
#menu-button:hover { background: rgba(255,255,255,0.09); }
#menu-button:active, #menu-button.open { background: rgba(255,255,255,0.16); }

#panel-launchers { display: flex; align-items: stretch; padding: 0 2px; }
.panel-launcher {
  width: 38px; border: none; background: transparent; color: var(--panel-fg);
  display: flex; align-items: center; justify-content: center; position: relative;
}
.panel-launcher img, .panel-launcher svg, .panel-launcher .pl-ico { width: 21px; height: 21px; }
.panel-launcher:hover { background: rgba(255,255,255,0.09); }
.panel-launcher:active { background: rgba(255,255,255,0.16); }
.panel-launcher.launching::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.2);
  animation: launchPulse 0.5s 2;
}
@keyframes launchPulse { 50% { opacity: 0; } }

.panel-sep { width: 1px; margin: 7px 4px; background: rgba(255,255,255,0.13); }

/* Window list */
#window-list { flex: 1; display: flex; align-items: stretch; gap: 2px; padding: 3px 4px; overflow: hidden; }
.wl-item {
  display: flex; align-items: center; gap: 7px; padding: 0 10px;
  max-width: 190px; min-width: 40px; flex: 0 1 auto;
  border: none; border-radius: 3px; background: rgba(255,255,255,0.05);
  color: #c9c9c9; font-size: 12.5px; position: relative; overflow: hidden;
}
.wl-item img, .wl-item .wl-ico { width: 17px; height: 17px; flex-shrink: 0; }
.wl-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-item:hover { background: rgba(255,255,255,0.12); }
.wl-item.active { background: rgba(255,255,255,0.16); color: #fff; box-shadow: inset 0 -2px 0 var(--accent); }
.wl-item.minimized { color: #8b8b8b; font-style: italic; }
.wl-item.attention { animation: wlAttention 0.9s infinite; }
@keyframes wlAttention { 50% { background: rgba(146,179,114,0.4); } }

/* Tray */
#panel-tray { display: flex; align-items: stretch; padding-right: 4px; }
.tray-item {
  border: none; background: transparent; color: var(--panel-fg);
  display: flex; align-items: center; justify-content: center; padding: 0 8px; gap: 6px;
  font-size: 12.5px; position: relative;
}
.tray-item:hover { background: rgba(255,255,255,0.09); }
.tray-item:active, .tray-item.open { background: rgba(255,255,255,0.16); }
.tray-item svg { display: block; }
#tray-clock { padding: 0 12px; font-variant-numeric: tabular-nums; }
#tray-showdesktop { width: 14px; padding: 0; border-left: 1px solid rgba(255,255,255,0.12); }
#tray-showdesktop:hover { background: rgba(255,255,255,0.14); }
#tray-workspaces { gap: 3px; }
.wsw-box { width: 22px; height: 15px; border: 1px solid rgba(255,255,255,0.35); border-radius: 2px; background: rgba(255,255,255,0.05); }
.wsw-box.current { background: rgba(146,179,114,0.55); border-color: var(--accent); }

/* ===================== Panel popups ===================== */
.panel-popup {
  position: fixed; z-index: 7000; display: none;
  background: var(--menu-bg); color: var(--menu-fg);
  border: 1px solid var(--menu-border); border-radius: 9px;
  box-shadow: 0 10px 36px rgba(0,0,0,0.4);
  padding: 10px;
  transform-origin: bottom right;
}
.panel-popup.visible { display: block; animation: popupIn 0.14s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes popupIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } }

/* Calendar */
#calendar-popup { width: 300px; padding: 14px; }
.cal-today-line { text-align: center; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.cal-today-sub { text-align: center; font-size: 12px; color: var(--win-fg-dim); margin-bottom: 12px; }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-nav button { border: none; background: transparent; color: var(--menu-fg); width: 26px; height: 26px; border-radius: 5px; font-size: 14px; }
.cal-nav button:hover { background: var(--hover-bg); }
.cal-month { font-weight: 600; font-size: 13.5px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-dow { font-size: 10.5px; color: var(--win-fg-dim); padding: 4px 0; font-weight: 600; }
.cal-day { padding: 6px 0; font-size: 12px; border-radius: 5px; }
.cal-day.other { color: var(--win-fg-dim); opacity: 0.5; }
.cal-day:hover { background: var(--hover-bg); }
.cal-day.today { background: var(--accent); color: #fff; font-weight: 700; }
.cal-foot { margin-top: 10px; border-top: 1px solid var(--menu-border); padding-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.cal-foot button { border: none; background: none; color: var(--accent-strong); font-size: 12px; }
.cal-foot button:hover { text-decoration: underline; }

/* Volume popup */
#volume-popup { width: 270px; }
.vol-row { display: flex; align-items: center; gap: 10px; padding: 4px 2px; }
.vol-ico { width: 20px; height: 20px; display: flex; }
#volume-slider { flex: 1; accent-color: var(--accent); }
#volume-pct { width: 38px; text-align: right; font-size: 12px; color: var(--win-fg-dim); }
.vol-mute-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--menu-border); font-size: 12.5px; }
.vol-mute-row button, .net-foot button { border: none; background: none; color: var(--accent-strong); font-size: 12px; }
.vol-mute-row button:hover, .net-foot button:hover { text-decoration: underline; }

/* Network popup */
#network-popup { width: 280px; }
.net-head { font-weight: 600; font-size: 12.5px; padding: 2px 4px 8px; }
.net-item { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; }
.net-item:hover { background: var(--hover-bg); }
.net-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.net-dot.off { background: #9a9a9a; opacity: 0.5; }
.net-name { font-size: 13px; }
.net-sub { font-size: 11px; color: var(--win-fg-dim); }
.net-foot { margin-top: 6px; border-top: 1px solid var(--menu-border); padding: 8px 4px 0; }
.bat-row { display: flex; align-items: center; gap: 12px; padding: 4px; }