/* src/journey-back-button.css
 * JOURNEY-BACK-UI-01 — recall button, flex sibling of #hud-hotkey-bar inside
 * #hud-bottom-bar (same layout convention as .hud-hs__add-bar).
 */

.jb-wrap {
  flex-shrink: 0;
  align-self: flex-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: auto;
}

.jb-btn {
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(120, 200, 255, 0.35);
  border-radius: 5px;
  color: #cfe8ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.jb-btn:hover:not(:disabled) {
  background: rgba(120, 200, 255, 0.14);
  border-color: rgba(120, 200, 255, 0.6);
}

.jb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.jb-btn__icon {
  font-size: 15px;
  line-height: 1;
}

.jb-btn--channeling {
  border-color: #78c8ff;
  box-shadow: 0 0 8px rgba(120, 200, 255, 0.45);
}

.jb-btn--interrupted {
  border-color: #f87171;
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

/* ── Channel progress bar ─────────────────────────────────────────────── */

.jb-bar {
  width: 40px;
  height: 4px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  overflow: hidden;
  display: none;
}

.jb-bar__fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #78c8ff);
  box-shadow: 0 0 5px rgba(120, 200, 255, 0.6);
  transition: width 0.05s linear;
}

/* ── Cost / cooldown / interrupt-reason readout ──────────────────────── */

.jb-cost {
  font-size: 9px;
  color: rgba(207, 232, 255, 0.85);
  white-space: nowrap;
  min-height: 11px;
  text-align: center;
}