/* ---------- rail of parked tasks (multitask mode) ---------- */

#app { --rail-w: 196px; --slot-inner: max(0px, calc(var(--slot-radius) - 5px)); } /* radius minus border and padding */
#app.has-rail { padding-left: calc(var(--rail-w) + 16px); }
#rail {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--rail-w);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 10px 14px 14px;
  border-right: 1px solid var(--border);
  background: var(--bg);
}
#rail-new {
  flex: none;
  padding: 7px 10px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}
#rail-new:hover { color: var(--fg); border-color: var(--accent); }
#rail-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.slot {
  flex: none; display: flex; flex-direction: column; gap: 5px; cursor: pointer; outline: none; user-select: none;
  padding: 3px; border: 2px solid #6f9a7e; border-radius: var(--slot-radius); /* green: idle */
}
.slot.busy { border-color: #b57676; } /* red: processing */
.slot.waiting { border-color: var(--accent); } /* needs an answer from you */
.slot .thumb { width: 100%; aspect-ratio: var(--stage-ar, 16 / 10); border-radius: var(--slot-inner); background: var(--surface-2); }
.slot:focus-visible .thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
.slot-bar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); min-width: 0; }
.slot:hover .slot-bar { color: var(--fg); }
.slot-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-state { display: none; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.slot.busy .slot-state {
  display: block;
  background: conic-gradient(#22d3ee, #8b5cf6, #ec4899, #f59e0b, #22d3ee);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
  animation: spin 0.9s linear infinite;
}
.slot.waiting .slot-state { display: block; background: var(--accent); animation: pulse 1.4s ease-in-out infinite; }
.slot.error .slot-state { display: block; background: var(--danger); }
.slot-close {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
}
.slot:hover .slot-close, .slot-close:focus-visible { opacity: 1; }
.slot-close:hover { background: var(--surface-2); color: var(--danger); }
/* A set-aside app on its way to a window: its name follows the pointer. */
.drag-ghost {
  position: fixed;
  z-index: 1000;
  transform: translate(12px, 12px);
  max-width: 240px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}