/* dock.css — the MODULES sidebar: slide-out rack of window chips that can be
   dragged onto the wall, plus per-module put-away / collapse affordances. */

/* --- Sidebar shell (fixed to the left edge of the room) --- */
.hw-dock {
  position: fixed;
  left: 0;
  top: var(--topbar-h);
  bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  pointer-events: none; /* only the tab + open panel catch events */
}
.hw-dock.open { pointer-events: auto; }

/* Vertical tab, always visible */
.hw-dock-tab {
  pointer-events: auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: 14px 5px;
  border: 1px solid var(--edge);
  border-left: none;
  border-radius: 0 6px 6px 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #5C5F73 0%, #464858 55%, #3A3C4C 100%);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  cursor: pointer;
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.2), 2px 0 8px rgba(0, 0, 0, 0.45);
}
.hw-dock-tab:hover { color: var(--accent-bright); }

/* Slide-out panel */
.hw-dock-panel {
  width: 216px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border: 1px solid var(--edge);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.06)),
    linear-gradient(180deg, var(--panel), var(--panel-2));
  box-shadow: 4px 0 18px rgba(0, 0, 0, 0.5), inset 1px 0 0 rgba(255, 255, 255, 0.07);
  transform: translateX(-110%);
  transition: transform 160ms ease-out;
}
.hw-dock.open .hw-dock-panel { transform: translateX(0); }

.hw-dock-caption {
  font-size: 9px;
  letter-spacing: 0.22em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* --- Chip list --- */
.hw-dock-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.hw-dock-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(70, 72, 88, 0.55);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12));
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.hw-dock-item:hover {
  border-color: var(--accent-bright);
  box-shadow: 0 0 8px rgba(217, 155, 127, 0.25);
}
.hw-dock-item.lifted { cursor: grabbing; opacity: 0.45; }
.hw-dock-item.docked .hw-led {
  background: var(--accent-bright); /* lit LED = waiting in the dock */
  box-shadow: 0 0 7px rgba(217, 155, 127, 0.65);
}
.hw-dock-item:not(.docked) .hw-led { opacity: 0.35; } /* dim = already on the wall */

.hw-dock-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hw-dock-hint {
  font-size: 8px;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-align: center;
}

/* --- Drag ghost --- */
.hw-dock-ghost {
  position: fixed;
  z-index: 200;
  pointer-events: none;
  padding: 6px 12px;
  border-radius: 5px;
  border: 1px solid var(--accent-bright);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #5C5F73 0%, #464858 55%, #3A3C4C 100%);
  color: var(--text);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
}
.hw-dock-ghost.over-wall {
  border-color: var(--accent-bright);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(217, 155, 127, 0.5);
}

/* --- Per-module affordances --- */

/* Put-away button in the header (right side, next to the screw) */
.hw-header .hw-dock-away {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid rgba(5, 11, 16, 0.7);
  border-radius: 4px;
  background: rgba(5, 11, 16, 0.35);
  color: var(--text-faint);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;               /* appears on header hover — keeps headers clean */
  transition: opacity 100ms ease;
}
.hw-header:hover .hw-dock-away,
.hw-dock-away:focus-visible { opacity: 1; }
.hw-header .hw-dock-away:hover {
  color: var(--accent-bright);
  border-color: var(--accent-bright);
}

/* Collapsed module: body hidden, header stays grabbable */
.hw-module.collapsed .hw-body { display: none; }
.hw-module.collapsed .hw-screw-r { margin-right: 0; }

/* Locate pulse after a chip click / drop */
@keyframes hw-reveal-pulse {
  0% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 0 rgba(217, 155, 127, 0.75); }
  100% { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), 0 0 0 18px rgba(217, 155, 127, 0); }
}
.hw-module.reveal { animation: hw-reveal-pulse 650ms ease-out 2; }