/* Bottom panel — Mint-Y light panel, 40px default */
#panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--panel-height);
  background: var(--panel-bg);
  box-shadow: 0 -1px var(--separator);
  display: flex;
  align-items: stretch;
  z-index: 600;
  font-size: var(--fs-ui);
  color: var(--text);
  transition: transform 220ms var(--ease-out);
}
#panel.at-top { bottom: auto; top: 0; box-shadow: 0 1px var(--separator); }
#panel.autohide { transform: translateY(calc(100% - 3px)); }
#panel.autohide.revealed, #panel.autohide:hover { transform: none; }
#panel.autohide.at-top { transform: translateY(calc(-100% + 3px)); }
#panel.autohide.at-top.revealed { transform: none; }
#panel-edge-reveal {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  z-index: 599;
}
#panel-edge-reveal.top { top: 0; bottom: auto; }

.pl-group { display: flex; align-items: stretch; }

/* menu button */
#menu-button {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px;
  font-weight: 700;
  transition: background var(--t-fast);
}
#menu-button:hover { background: var(--hover-fill); }
#menu-button:active { background: var(--pressed-fill); }
#menu-button .lm-badge { width: 26px; height: 26px; }

/* launchers */
.panel-launcher {
  width: 40px;
  display: grid; place-items: center;
  transition: background var(--t-fast);
}
.panel-launcher:hover { background: var(--hover-fill); }
.panel-launcher:active { background: var(--pressed-fill); }
.panel-launcher img, .panel-launcher svg { width: 26px; height: 26px; }
.panel-launcher.running::after {
  content: "";
  position: absolute;
}

/* window list */
#wl-box {
  display: flex; align-items: stretch; gap: 4px;
  padding: 0 6px;
  overflow: hidden;
  flex: 0 1 auto;
  min-width: 0;
}
.wl-item {
  display: flex; align-items: center; gap: 6px;
  max-width: 170px; min-width: 34px;
  padding: 0 9px;
  border-bottom: 2px solid transparent;
  border-top: 2px solid transparent;
  font-weight: 700;
  font-size: var(--fs-small);
  color: rgba(48, 48, 48, .8);
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.wl-item svg { width: 18px; height: 18px; flex: none; }
.wl-item .wl-label { overflow: hidden; text-overflow: ellipsis; }
.wl-item:hover { background: rgba(48, 48, 48, .1); color: var(--text); }
.wl-item.focused { border-bottom-color: var(--accent); background: rgba(48, 48, 48, .15); color: var(--text); }
.wl-item.minimized { color: rgba(48, 48, 48, .5); }
#panel.at-top .wl-item.focused { border-bottom-color: transparent; border-top-color: var(--accent); }
:root[data-dark="true"] .wl-item { color: rgba(218, 218, 218, .75); }
:root[data-dark="true"] .wl-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
:root[data-dark="true"] .wl-item.focused { background: rgba(255, 255, 255, .12); }

/* right applets */
#pl-right { margin-left: auto; display: flex; align-items: stretch; }
.applet {
  display: flex; align-items: center; gap: 6px;
  padding: 0 8px;
  transition: background var(--t-fast);
  white-space: nowrap;
}
.applet:hover { background: var(--hover-fill); }
.applet:active { background: var(--pressed-fill); }
.applet.bold { font-weight: 700; font-size: var(--fs-small); }
.applet svg { width: 17px; height: 17px; color: var(--text); }

/* workspace switcher */
.ws-switcher { display: flex; align-items: stretch; gap: 3px; padding: 0 5px; }
.ws-btn {
  min-width: 30px;
  display: grid; place-items: center;
  font-weight: 700; font-size: var(--fs-small);
  color: var(--text-insensitive);
  background: rgba(48, 48, 48, .05);
  transition: background var(--t-fast), color var(--t-fast);
}
.ws-btn:hover { background: var(--hover-fill); color: var(--text); }
.ws-btn.current { background: var(--hover-fill); color: var(--text); }

/* show desktop corner */
#show-desktop-bar {
  width: 7px;
  border-left: 1px solid var(--border-strong);
  background: linear-gradient(to right, transparent, rgba(48, 48, 48, .14));
  transition: background var(--t-fast);
}
#show-desktop-bar:hover { background: var(--pressed-fill); }
#panel.at-top #show-desktop-bar { border-left: none; border-right: 1px solid var(--border-strong); }

@media (max-width: 760px) {
  #menu-button span { display: none; }
  .applet.hide-narrow { display: none; }
  .ws-switcher { display: none; }
}